#finalRouteSpaPage {
  position: fixed;
  --night: #071326;
  --night-soft: #0e213d;
  --blue: #b64e73;
  --blue-soft: #f9dce6;
  --ink: #10192a;
  --muted: #687386;
  --line: #e6eaf0;
  --paper: #fbf4f5;
  --white: #fff;
  background-color: #fbf4f5;
}

@scope (#finalRouteSpaPage) {
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Pretendard, "Noto Sans KR", sans-serif; }
.app-shell { min-height: 100vh; padding-left: 0; transition: padding-left 180ms ease; }
.app-shell.sidebar-collapsed { padding-left: 64px; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: 224px; padding: 0 8px 16px; display: flex; flex-direction: column; overflow: hidden; color: #f8edf1; border-right: 1px solid #4c303a; background: radial-gradient(ellipse at 50% 0%,rgba(190,91,125,.2),transparent 30%),linear-gradient(180deg,#35252b,#241b1f 72%); transition: width 260ms cubic-bezier(.2,.8,.2,1); }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 42px; margin-top: -2px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: white; font-size: 25px; font-weight: 800; text-decoration: none; }
.brand-mark { width: 24px; height: 24px; display: grid; place-items: center; color: white; background: transparent; border-radius: 0; }
.sidebar-toggle { width: 30px; height: 30px; display: grid; place-items: center; color: #f8dfe7; background: #432f36; border: 1px solid #72505c; border-radius: 9px; cursor: pointer; }
.side-nav { display: grid; gap: 16px; margin-top: 18px; }
.nav-item { width: 100%; min-height: 34px; padding: 4px 0; display: flex; align-items: center; gap: 14px; color: #f8edf1; background: transparent; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nav-item .icon { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; color: white; font-size: 15px; }
.nav-item:hover { color: #fff0f5; background: rgba(211,116,148,.11); }
.nav-item.active { color: #f3b7ca; background: linear-gradient(135deg,rgba(196,95,125,.32),rgba(196,95,125,.1)); box-shadow: inset 3px 0 #d77e9b; }
.sidebar-spacer { flex: 1; }
.account-panel { width: 100%; margin-top: 18px; padding: 8px 0; display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 10px; color: white; background: transparent; text-decoration: none; }
.account-panel .avatar { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: #ffe1aa; background: #8a520b center/cover no-repeat; border-radius: 50%; font-size: 11px; font-weight: 800; }
.account-copy { min-width: 0; display: grid; gap: 2px; }.account-copy strong { font-size: 12px; }.account-copy small { color: #9db1b8; font-size: 10px; }.more { margin-left: auto; color: #91a6ad; }
.app-shell.sidebar-collapsed .sidebar { width: 64px; align-items: center; }
.app-shell.sidebar-collapsed .sidebar-header { padding-inline: 0; }.app-shell.sidebar-collapsed .brand span:last-child,.app-shell.sidebar-collapsed .nav-item span:last-child,.app-shell.sidebar-collapsed .account-copy,.app-shell.sidebar-collapsed .more { display: none; }
.app-shell.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }.app-shell.sidebar-collapsed .side-nav { width: 48px; }.app-shell.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }.app-shell.sidebar-collapsed .account-panel { width: 48px; grid-template-columns:34px; justify-content: center; padding: 7px; }
@media (min-width:851px) {
  .brand span:last-child,.nav-item span:last-child,.account-copy,.more { opacity:1; visibility:visible; transform:translateX(0); transition:opacity 120ms ease 135ms,transform 180ms ease 110ms,visibility 0s linear 0s; }
  .brand span:last-child { flex:0 0 150px; width:150px; white-space:nowrap; }
  .nav-item span:last-child { flex:0 0 154px; width:154px; white-space:nowrap; }
  .account-copy { grid-template-columns:154px; width:154px; }
  .more { flex:0 0 20px; width:20px; }
  .app-shell.sidebar-collapsed .brand span:last-child,.app-shell.sidebar-collapsed .nav-item span:last-child,.app-shell.sidebar-collapsed .account-copy,.app-shell.sidebar-collapsed .more { display:grid; position:absolute; opacity:0; visibility:hidden; transform:translateX(-6px); pointer-events:none; transition:opacity 70ms ease,transform 100ms ease,visibility 0s linear 100ms; }
  .app-shell.sidebar-collapsed .brand span:last-child,.app-shell.sidebar-collapsed .nav-item span:last-child { display:block; }
  .app-shell.sidebar-collapsed .brand,.app-shell.sidebar-collapsed .nav-item,.app-shell.sidebar-collapsed .account-panel { position:relative; }
}
button, a { font: inherit; }
button { color: inherit; }
.topbar { height: 72px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--night); font-weight: 800; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--night); border-radius: 50%; }
.nav { display: flex; align-self: stretch; gap: 34px; }
.nav a { display: grid; place-items: center; color: #525c6d; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; }
.nav a.active { color: var(--ink); border-color: var(--blue); }
.profile { display: flex; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: #263c5a; border-radius: 50%; font-size: 11px; }
main { min-height: 100vh; }
:scope { height:100vh; overflow:hidden; }
:scope .hero { min-height:130px; padding-top:16px; padding-bottom:16px; }
:scope .hero h1 { font-size:clamp(30px,3vw,42px); line-height:1.06; }
:scope .hero-copy { margin-top:10px; line-height:1.5; }
:scope .trip-summary { padding:15px 19px; }
:scope .trip-summary strong { margin:4px 0 7px; font-size:18px; }
:scope .day-tabs { flex-wrap:nowrap; gap:0; max-width:none; }
:scope .day-tab { min-height:82px; padding-top:12px; padding-bottom:12px; border-radius:0; }
:scope .route-layout { height:calc(100vh - 192px); min-height:440px; margin-top:14px; }
:scope .planner { height:100vh; padding:78px 24px 18px; }
.hero { min-height: 258px; padding: 52px max(6vw, calc((100vw - 1240px)/2)); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; color: #3c2932; background-color: #f9edef; background-image: radial-gradient(circle at 82% 18%,rgba(218,142,168,.3),transparent 28%), linear-gradient(120deg,#fff9f7,#f6e6ea); }
.eyebrow { margin: 0 0 12px; color: #b64e73; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.045em; }
.hero-copy { max-width: 550px; margin: 18px 0 0; color: #806974; line-height: 1.7; }
.trip-summary { min-width: 260px; padding: 22px 24px; border: 1px solid #e8cbd5; background: rgba(255,251,249,.74); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 12px 30px rgba(105,56,74,.08); }
.trip-summary p, .trip-summary span { margin: 0; color: #8a707a; font-size: 13px; }
.trip-summary strong { display: block; margin: 7px 0 12px; font-size: 21px; }
.planner { width: 100%; max-width: 1680px; margin: -2px auto 0; padding: 0 24px 32px; }
.day-tabs-shell { position: relative; z-index:40; }
.day-tabs { display: flex; background: white; border: 1px solid var(--line); border-radius: 0 0 18px 18px; box-shadow: 0 10px 32px rgba(15,31,54,.07); overflow-x: scroll; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; }
.day-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.day-scroll-button { position: absolute; top: 50%; z-index: 15; width: 42px; height: 42px; display: grid; place-items: center; padding: 0 0 4px; color: #a94268; background: rgba(255,255,255,.96); border: 1px solid #e6cbd4; border-radius: 50%; box-shadow: 0 7px 20px rgba(74,34,49,.17); transform: translateY(-50%); font-size: 30px; line-height: 1; cursor: pointer; transition: opacity 160ms ease, transform 160ms ease, background 160ms ease; }
.day-scroll-button:hover:not(:disabled) { color: white; background: #b64e73; transform: translateY(-50%) scale(1.06); }
.day-scroll-button:disabled { opacity: 0; pointer-events: none; }
.day-scroll-button.prev { left: -17px; }
.day-scroll-button.next { right: -17px; }
.day-tab { position: relative; flex: 0 0 clamp(210px, 26vw, 310px); min-height: 104px; padding: 19px 26px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 15px; text-align: left; background: white; border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.day-tab:last-child { border-right: 0; }
.day-tab > span { grid-row: 1 / 3; align-self: center; padding: 8px 9px; color: #718096; background: #f0f2f5; border-radius: 7px; font-size: 11px; font-weight: 800; }
.day-tab strong { align-self: end; font-size: 18px; }
.day-tab small { align-self: start; margin-top: 4px; color: var(--muted); }
.day-tab.active { color: white; background: linear-gradient(135deg,#c45c80,#a94268); }
.day-tab.active::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--blue); transform: rotate(45deg); }
.day-tab.active > span { color: var(--blue); background: white; }
.day-tab.active small { color: #dbe5ff; }
.route-layout { height: clamp(620px, 68vh, 820px); margin-top: 28px; display: grid; grid-template-columns: minmax(430px, 480px) minmax(0, 1fr); background: #fffaf9; border: 1px solid #eadde1; border-radius: 18px; box-shadow: 0 16px 44px rgba(83,40,56,.08); overflow: hidden; }
.route-panel { min-height: 0; padding: 30px; display: flex; flex-direction: column; overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.panel-heading p { margin: 0 0 8px; color: var(--blue); font-size: 12px; font-weight: 800; }
.panel-heading h2 { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.03em; }
.card-time.place-time-editable { min-width:84px; padding:0; overflow:hidden; border:1px solid transparent; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.card-time.place-time-editable:hover { border-color:#e8c9d5; box-shadow:0 5px 14px rgba(151,61,96,.12); transform:translateY(calc(-50% - 1px)); }
.place-timing-edit { position:relative; display:block; width:100%; min-width:84px; padding:8px 27px 8px 9px; color:inherit; background:transparent; border:0; cursor:pointer; }
.place-timing-edit:hover, .place-timing-edit:focus-visible { background:linear-gradient(135deg,#fff5f8,#f6e2e9); outline:none; }
.place-timing-edit time { gap:1px; }
.place-timing-edit time i { position:relative; width:1px; height:8px; margin:1px 0; color:transparent; background:#dab4c3; }
.place-timing-edit time i::after { content:""; position:absolute; left:50%; bottom:-1px; width:3px; height:3px; background:#c77b98; border-radius:50%; transform:translateX(-50%); }
.place-timing-edit-icon { position:absolute; top:50%; right:6px; display:grid; place-items:center; width:18px; height:18px; color:#ae4b70; background:rgba(255,255,255,.78); border:1px solid #e5c6d2; border-radius:50%; transform:translateY(-50%); transition:color .18s ease,background .18s ease,transform .18s ease; }
.place-timing-edit-icon svg { width:11px; height:11px; fill:currentColor; }
.place-timing-edit:hover .place-timing-edit-icon, .place-timing-edit:focus-visible .place-timing-edit-icon { color:#fff; background:#b94c76; border-color:#b94c76; transform:translateY(-50%) scale(1.06); }
.place-timing-modal { position:fixed; z-index:240; inset:0; display:grid; place-items:center; }
.place-timing-modal[hidden] { display:none; }
.place-timing-backdrop { position:absolute; inset:0; background:rgba(46,25,34,.28); backdrop-filter:blur(2px); }
.place-timing-dialog { position:relative; width:min(360px,calc(100% - 32px)); padding:20px; background:#fffaf9; border:1px solid #ead8df; border-radius:18px; box-shadow:0 20px 55px rgba(65,31,44,.22); }
.place-timing-dialog header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px; }
.place-timing-dialog header small { color:#b14e73; font-weight:800; }
.place-timing-dialog h3 { margin:4px 0 0; font-size:20px; }
.place-timing-dialog header button { width:30px; height:30px; padding:0; background:#fff; border:1px solid #ead8df; border-radius:50%; font-size:20px; cursor:pointer; }
.place-timing-dialog label { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:10px; margin-top:11px; font-size:13px; font-weight:800; }
.place-timing-dialog input,.place-timing-dialog select { width:100%; height:40px; padding:0 11px; color:#4b2635; background:#fff; border:1px solid #dfcbd3; border-radius:10px; font:inherit; box-sizing:border-box; }
.place-timing-readonly { display:flex; align-items:center; width:100%; height:40px; padding:0 11px; color:#806e76; background:#f7f1f3; border:1px solid #e5d8dd; border-radius:10px; box-sizing:border-box; }
.place-timing-readonly output { font-weight:800; }
.place-duration-input { position:relative; }
.place-duration-input b { position:absolute; top:50%; right:12px; color:#9e828c; transform:translateY(-50%); }
.place-duration-input input { padding-right:36px; }
.place-timing-dialog > p { margin:14px 0 0; color:#8c747d; font-size:12px; line-height:1.5; }
.place-timing-dialog footer { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.place-timing-dialog footer button { min-width:78px; height:38px; padding:0 14px; background:#fff; border:1px solid #dfcbd3; border-radius:10px; font-weight:800; cursor:pointer; }
.place-timing-dialog footer [data-place-timing-save] { color:#fff; background:#b64d75; border-color:#b64d75; }
.place-timing-dialog footer button:disabled { opacity:.5; cursor:wait; }
.count { flex: none; height: fit-content; padding: 6px 9px; color: var(--muted); background: #f2f4f7; border-radius: 6px; font-size: 10px; font-weight: 800; }
.route-list { min-height: 0; margin: 5px -10px 5px 0; padding: 0 10px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #d28aa3 #f8eaee; list-style: none; }
.route-list::-webkit-scrollbar { width: 7px; }
.route-list::-webkit-scrollbar-track { background: #f8eaee; border-radius: 20px; }
.route-list::-webkit-scrollbar-thumb { background: #d28aa3; border-radius: 20px; }
.route-item { position: relative; padding: 10px 0 0; }
.route-item:not(:last-child)::before { content: ""; position: absolute; z-index: 0; left: 35px; top: 50px; bottom: -22px; border-left: 2px dashed #d8aec0; }
.route-card-row { position: relative; z-index: 1; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 14px; align-items: start; }
.route-order { z-index: 1; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.route-number { z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; color: white; background: var(--blue); border: 4px solid var(--blue-soft); outline: 1px solid #aec3ff; border-radius: 50%; font-weight: 800; }
.route-item.meal { margin: 0; padding-top: 10px; background: transparent; }
.route-item.meal .route-number { color: #a85b24; background: #fff8f0; border-color: #f7d4b5; outline-color: #efc7a4; font-size: 15px; }
.route-item.restaurant .route-number { position:relative; color:#9a5425; background:#fff8f0; border-color:#f7d4b5; outline-color:#efc7a4; }
.route-item.restaurant .route-number::after { content:"🍴"; position:absolute; right:-8px; bottom:-7px; width:18px; height:18px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; background:#f4b87d; font-size:9px; line-height:1; box-shadow:0 2px 5px rgba(132,75,34,.18); }
.route-item.anchor .route-number { background: #59434d; border-color: #eee2e6; outline-color: #d2bdc5; font-size: 12px; }
.route-info { position: relative; min-width: 0; min-height: 86px; padding: 17px 104px 17px 18px; background: #fff; border: 1px solid #eadde2; border-radius: 15px; box-shadow: 0 4px 12px rgba(67,37,49,.07); }
.route-info[role="button"] { cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.route-info[role="button"]:hover { border-color: #bd6b88; box-shadow: 0 7px 18px rgba(103,46,68,.13); transform: translateY(-1px); }
.route-info[role="button"]:focus-visible { outline: 3px solid rgba(182,78,115,.24); outline-offset: 2px; }
.route-info[role="button"].selected { border-color: #a63d64; box-shadow: 0 0 0 3px rgba(182,78,115,.15), 0 8px 20px rgba(103,46,68,.15); }
.route-item.place .route-info { border-color: #dfc5d0; }
.route-item.meal .route-info { background: #fffaf4; border-color: #f2d5b9; }
.route-item.meal .route-info[role="button"]:hover { border-color:#d99155; box-shadow:0 7px 18px rgba(132,75,34,.14); }
.meal-selection-cue { display:inline-flex; align-items:center; gap:6px; width:max-content; max-width:100%; margin-top:8px; color:#a85b24; font-size:11px; font-weight:850; line-height:1.25; }
.meal-selection-cue b { font-size:14px; transition:transform 150ms ease; }
.route-info:hover .meal-selection-cue b,.route-info:focus-visible .meal-selection-cue b { transform:translateX(3px); }
.route-item.restaurant .route-info { background:#fffaf4; border-color:#efc79f; box-shadow:0 4px 12px rgba(132,75,34,.08); }
.route-item.restaurant .route-info[role="button"]:hover { border-color:#d99155; box-shadow:0 7px 18px rgba(132,75,34,.14); }
.route-item.anchor .route-info { background: #f8f5f6; }
.route-info h3 { min-width: 0; margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.card-time { position: absolute; top: 50%; right: 16px; min-width: 76px; padding: 8px 10px; color: #9f4264; background: #f9edf1; border-radius: 8px; text-align: center; transform: translateY(-50%); }
.card-time time { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 800; line-height: 1.2; }
.card-time time span { display: block; white-space: nowrap; }
.card-time time i { height: 10px; color: #c298a8; font-size: 9px; font-style: normal; line-height: 10px; }
.route-item.meal .card-time { color: #a85b24; background: #fff0e1; }
.route-item.restaurant .card-time { color:#a85b24; background:#fff0e1; }
.route-item.restaurant .place-summary { color:#9a6a48; }
.place-summary { min-width: 0; margin: 0; overflow: hidden; color: #86737c; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.route-transport { position: relative; z-index: 2; margin: 14px 0 4px 86px; display: grid; grid-template-columns: minmax(14px,1fr) auto minmax(14px,1fr); align-items: center; gap: 8px; }
.route-transport > span { height: 1px; background: #eadde2; }
.transport-pill { padding: 6px 10px 6px 7px; display: flex; align-items: center; gap: 6px; color: #67545d; background: #f8edf1; border: 1px solid #ecd5dd; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.route-detail-cue { margin-left: 1px; color: #b64e73; font-size: 14px; font-weight: 900; line-height: 1; transition: transform 150ms ease, color 150ms ease; }
.transport-pill:hover .route-detail-cue,.transport-pill:focus-visible .route-detail-cue { color: #8f3157; transform: translateX(3px); }
.route-transport .transport-icon { width: 23px; height: 23px; display: grid; place-items: center; background: white; border-radius: 50%; font-size: 13px; }
.route-transport strong { color: #9f4264; font-size: 11px; }
.route-transport b { color: #8c7a82; font-size: 10px; font-weight: 600; }
.route-transport:has(.transport-pill:hover),.route-transport:has(.transport-pill:focus-visible),.route-transport:has(.route-tooltip:hover) { z-index:40; }
.route-tooltip { position:absolute; z-index:30; left:50%; bottom:calc(100% + 8px); width:min(330px,calc(100vw - 120px)); padding:12px 14px; visibility:hidden; color:#4d3c44; background:#fffaf9; border:1px solid #e4cbd5; border-radius:12px; box-shadow:0 12px 30px rgba(62,31,43,.2); opacity:0; transform:translate(-50%,6px); transition:opacity 140ms ease,transform 140ms ease,visibility 140ms ease; pointer-events:none; white-space:normal; }
.transport-pill:hover ~ .route-tooltip,.transport-pill:focus-visible ~ .route-tooltip,.route-tooltip:hover { visibility:visible; opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.route-tooltip::after { content:""; position:absolute; left:50%; top:100%; border:7px solid transparent; border-top-color:#fffaf9; transform:translateX(-50%); }
.route-transport.tooltip-below .route-tooltip { top:calc(100% + 8px); bottom:auto; transform:translate(-50%,-6px); }
.route-transport.tooltip-below .transport-pill:hover ~ .route-tooltip,.route-transport.tooltip-below .transport-pill:focus-visible ~ .route-tooltip,.route-transport.tooltip-below .route-tooltip:hover { transform:translate(-50%,0); }
.route-transport.tooltip-below .route-tooltip::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#fffaf9; }
.route-tooltip p { margin:0; display:grid; gap:4px; font-size:11px; line-height:1.45; }
.route-tooltip p span { color:#806e76; }
.route-tooltip ol { margin:0; padding:0; display:grid; gap:8px; list-style:none; }
.route-tooltip li { display:grid; gap:2px; }
.route-tooltip li strong { color:#9f4264; font-size:11px; }
.route-tooltip li span { color:#74636b; font-size:10px; line-height:1.4; }
.route-footer { margin-top: auto; padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr; background: #f6f8fb; border-radius: 12px; }
.route-footer div + div { padding-left: 20px; border-left: 1px solid #dfe4eb; }
.route-footer span, .route-footer strong { display: block; }
.route-footer span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.route-footer strong { font-size: 15px; }
.route-footer .meal-summary-line { display: block; margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; white-space: nowrap; }
.map-wrap { position: relative; width: 100%; height: 100%; min-width: 0; background: #dbe3e8; container-type:inline-size; }
.schedule-page-navigation { display:none; }
.schedule-page-navigation:not([hidden]) { display:none; }
.schedule-flow-button { display:flex; align-items:center; gap:10px; min-width:132px; height:54px; padding:8px 14px; color:#694351; background:rgba(255,252,252,.96); border:1px solid #e7ccd5; border-radius:14px; box-shadow:0 7px 20px rgba(71,37,50,.14); cursor:pointer; backdrop-filter:blur(8px); transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease; }
.schedule-flow-button > span:not(.schedule-flow-arrow) { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.schedule-flow-button small { color:#aa7a8b; font-size:10px; font-weight:700; }
.schedule-flow-button strong { font-size:13px; white-space:nowrap; }
.schedule-flow-button.next { justify-content:flex-end; color:#fff; background:rgba(181,72,113,.96); border-color:#b54871; }
.schedule-flow-button.next > span:first-child { align-items:flex-end; }
.schedule-flow-button.next small { color:#f8dce6; }
.schedule-flow-arrow { font-size:18px; line-height:1; }
.schedule-flow-button:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(71,37,50,.2); }
.schedule-flow-button:focus-visible { outline:3px solid rgba(181,72,113,.28); outline-offset:2px; }
.route-minimap { position:absolute; z-index:25; left:12px; bottom:38px; width:154px; height:142px; color:#563341; background:rgba(255,250,249,.94); border:1px solid rgba(218,185,197,.92); border-radius:14px; box-shadow:0 8px 24px rgba(69,35,48,.16); overflow:hidden; backdrop-filter:blur(8px); }
.route-minimap[hidden] { display:none; }
.route-minimap-heading { position:absolute; z-index:3; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; height:30px; padding:0 10px; box-sizing:border-box; background:rgba(255,250,249,.9); border-bottom:1px solid rgba(224,199,208,.75); font-size:11px; font-weight:900; }
.route-minimap-heading small { color:#a77b8b; font-size:9px; }
.route-minimap svg,.route-minimap-nodes { position:absolute; left:0; bottom:0; width:154px; height:112px; }
.route-minimap svg { background:linear-gradient(145deg,#fff8fa,#f5e9ed); }
.route-minimap .mini-grid { fill:none; stroke:#eadde2; stroke-width:.55; opacity:.7; }
.route-minimap .mini-route-shadow { fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.route-minimap .mini-route-line { fill:none; stroke:url(#mini-route-gradient); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 3; }
.route-minimap-node { position:absolute; left:var(--x); top:var(--y); display:grid; place-items:center; width:17px; height:17px; padding:0; color:#fff; background:#b84d76; border:2px solid #fff; border-radius:50% 50% 50% 3px; box-shadow:0 2px 5px rgba(69,35,48,.25); transform:translate(-50%,-50%) rotate(-45deg); cursor:pointer; }
.route-minimap-node span { font-size:7px; font-weight:900; transform:rotate(45deg); }
.route-minimap-node.anchor { background:#543641; }
.route-minimap-node:hover,.route-minimap-node:focus-visible { z-index:4; background:#842f52; outline:2px solid rgba(184,77,118,.28); transform:translate(-50%,-50%) rotate(-45deg) scale(1.16); }
@media (max-width:700px) { .route-minimap { left:8px; bottom:34px; transform:scale(.88); transform-origin:left bottom; } }
@media (max-width:700px) { .schedule-page-navigation:not([hidden]) { display:none; } }
#placeChatPanel.final-route-detail { z-index: 120; top: 0; right: 0; bottom: 0; width: min(430px, 48%); border-radius: 0; animation: final-detail-enter 180ms ease-out both; }
#placeChatPanel.final-route-detail.final-route-detail-closing { animation: final-detail-exit 180ms ease-in both; pointer-events: none; }
#placeChatPanel.final-route-detail .place-actions { display: none; }
@keyframes final-detail-enter { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes final-detail-exit { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(28px); } }
.map { width: 100%; height: 100%; min-height: 0; }
.map-placeholder { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; color: #718095; background-color: #e8edf0; background-image: linear-gradient(30deg, rgba(107,127,147,.08) 12%, transparent 12.5%, transparent 87%, rgba(107,127,147,.08) 87.5%), linear-gradient(150deg, rgba(107,127,147,.08) 12%, transparent 12.5%, transparent 87%, rgba(107,127,147,.08) 87.5%); background-size: 80px 140px; }
.map-placeholder span { font-size: 12px; }
.map-placeholder strong { margin: 7px 0; color: #425269; font-size: 26px; letter-spacing: .08em; }
.map-placeholder p { margin: 0; font-size: 12px; }
.map-legend, .calendar-button, .schedule-edit-button { z-index: 10; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(24,43,66,.16); }
.map-legend { position:absolute; left: 18px; top: 18px; padding: 10px 14px; display: flex; align-items: center; gap: 9px; border-radius: 8px; }
.map-legend p { margin: 0; font-size: 12px; }
.map-action-cards { position:absolute; z-index:10; right:62px; top:18px; display:flex; align-items:center; gap:8px; }
.calendar-button,.schedule-edit-button { padding:11px 15px; display:flex; align-items:center; gap:7px; color:#9f4264; border:1px solid #ead5dd; border-radius:9px; font-size:12px; font-weight:800; cursor:pointer; transition:color 160ms ease,background 160ms ease,transform 160ms ease; }
.calendar-button:hover,.schedule-edit-button:hover { color:white; background:#b64e73; transform:translateY(-1px); }
.calendar-button span,.schedule-edit-button span { font-size:15px; }
.schedule-edit-button[hidden] { display:none; }
@media(max-width:700px){.map-action-cards{right:62px;top:12px;gap:5px}.calendar-button,.schedule-edit-button{padding:9px 10px;font-size:10px}}
@container (max-width:620px) {
  .map-action-cards { top:12px; right:62px; max-width:calc(100% - 74px); gap:5px; }
  .calendar-button,.schedule-edit-button { padding:9px 10px; font-size:10px; }
  .map-legend { top:58px; left:12px; }
}
.calendar-modal[hidden] { display: none; }
.calendar-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.calendar-backdrop { position: absolute; inset: 0; background: rgba(35,22,29,.58); backdrop-filter: blur(5px); }
.calendar-dialog { position: relative; width: min(840px,100%); max-height: min(850px,calc(100vh - 48px)); display: grid; grid-template-rows: auto auto auto minmax(0,1fr); overflow: hidden; background: #fffaf9; border: 1px solid #ead7de; border-radius: 22px; box-shadow: 0 28px 80px rgba(27,13,20,.3); }
.calendar-header { padding: 24px 28px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee0e5; }
.calendar-header p { margin: 0 0 5px; color: #b64e73; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.calendar-header h2 { margin: 0; font-size: 24px; }
.calendar-close { width: 38px; height: 38px; display: grid; place-items: center; color: #806873; background: #f7edf0; border: 0; border-radius: 50%; font-size: 25px; cursor: pointer; }
.calendar-toolbar { padding: 16px 28px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; text-align: center; }
.calendar-toolbar button { width: 38px; height: 38px; color: #a94268; background: white; border: 1px solid #ead5dd; border-radius: 50%; font-size: 25px; cursor: pointer; }
.calendar-toolbar button:disabled { opacity: .3; cursor: default; }
.calendar-toolbar strong,.calendar-toolbar span { display: block; }
.calendar-toolbar strong { font-size: 18px; }
.calendar-toolbar span { margin-top: 3px; color: #8a7680; font-size: 12px; }
.calendar-day-tabs { padding: 0 28px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.calendar-day-tabs::-webkit-scrollbar { display: none; }
.calendar-day-tabs button { flex: 0 0 auto; padding: 8px 13px; color: #806d76; background: #f7eef1; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: pointer; }
.calendar-day-tabs button.active { color: white; background: #b64e73; }
.calendar-schedule { min-height: 0; padding: 8px 28px 30px; overflow-y: auto; scrollbar-color: #d28aa3 #f8eaee; }
.calendar-entry { display: grid; grid-template-columns: 104px 22px minmax(0,1fr); gap: 12px; min-height: 88px; }
.calendar-entry-time { padding-top: 15px; color: #9f4264; font-size: 11px; font-weight: 800; text-align: right; white-space: pre-line; }
.calendar-entry-line { position: relative; display: flex; justify-content: center; }
.calendar-entry-line::after { content: ""; position: absolute; top: 27px; bottom: -2px; border-left: 2px dashed #dfbac8; }
.calendar-entry:last-child .calendar-entry-line::after { display: none; }
.calendar-entry-line span { z-index: 1; width: 13px; height: 13px; margin-top: 21px; background: #b64e73; border: 3px solid #f7dce6; border-radius: 50%; }
.calendar-entry.meal .calendar-entry-line span { background: #ee8c37; border-color: #ffead8; }
.calendar-entry-card { align-self: start; margin-bottom: 15px; padding: 15px 17px; background: white; border: 1px solid #eadde2; border-radius: 13px; box-shadow: 0 3px 10px rgba(62,34,45,.06); }
.calendar-entry.meal .calendar-entry-card { background: #fff9f1; border-color: #f1d5b9; }
.calendar-entry-card h3 { margin: 0 0 6px; font-size: 15px; }
.calendar-entry-card p { margin: 0; color: #85727b; font-size: 11px; }
.calendar-empty { padding: 60px 20px; color: #8b7780; text-align: center; }
body.calendar-open { overflow: hidden; }
@media (max-width:600px) { .calendar-modal{padding:0}.calendar-dialog{width:100%;height:100%;max-height:none;border-radius:0}.calendar-entry{grid-template-columns:72px 18px minmax(0,1fr);gap:8px}.calendar-header,.calendar-toolbar{padding-inline:18px}.calendar-day-tabs,.calendar-schedule{padding-left:18px;padding-right:18px} }
.naver-marker { width: 34px; height: 42px; display: grid; place-items: start center; padding-top: 7px; color: white; background: var(--blue); border: 3px solid white; border-radius: 50% 50% 50% 4px; box-shadow: 0 3px 9px rgba(14,34,60,.3); transform: rotate(-45deg); font-weight: 800; }
.naver-marker span { transform: rotate(45deg); }
.naver-marker.anchor-marker { background: #59434d; }
@media (max-width: 850px) { .nav { display: none; } .hero { align-items: flex-start; flex-direction: column; } .trip-summary { width: 100%; } .route-layout { height: auto; grid-template-columns: 1fr; } .route-panel { max-height: 650px; } .route-list { max-height: 430px; } .map-wrap, .map, .map-placeholder { height: 520px; min-height: 520px; } }
@media (max-width: 850px) { .app-shell,.app-shell.sidebar-collapsed{padding-left:64px}.sidebar{width:64px;align-items:center}.sidebar-header{padding-inline:0}.brand span:last-child,.nav-item span:last-child,.account-copy,.more{display:none}.sidebar-toggle{display:none}.side-nav{width:48px}.nav-item{justify-content:center;padding:0}.account-panel{width:48px;grid-template-columns:34px;justify-content:center;padding:7px} }
@media (max-width: 560px) { .topbar { height: 62px; } .profile > span:last-child { display: none; } .hero { padding: 38px 22px; } .hero h1 { font-size: 34px; } .planner { padding: 0 12px 30px; } .day-tab { min-height: 88px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; } .day-tab > span { padding: 4px 6px; } .day-tab strong,.day-tab small { align-self:center; } .day-tab small { font-size: 10px; } .route-panel { padding: 24px 20px; } }
@media (max-width: 560px) { .day-scroll-button { width: 36px; height: 36px; font-size: 25px; } .day-scroll-button.prev { left: -7px; } .day-scroll-button.next { right: -7px; } }
@media (max-width: 560px) { .route-info { padding-right: 92px; } .card-time { right: 10px; min-width: 70px; padding-inline: 6px; } }
}