:root{
  --green:#2f8f4e; --green-dark:#1f6d33; --green-deep:#14532d;
  --pink:#e6177e; --pink-dark:#99003d; --pink-soft:#fdeef3;
  --amber:#f5a623; --cream:#f7faf2; --card:#fff;
  --text:#1f2937; --text-sub:#6b7280; --text-muted:#9ca3af; --border:#eef0e8;
  --radius:20px; --radius-lg:24px; --nav-h:50px;
  --tracking-title:-.02em; --tracking-label:.05em; --tracking-body:0;
}

/* 역할별 자간 체계 */
body,button,input,select,textarea,p,li,dd{letter-spacing:var(--tracking-body) !important;}
h1,h2,h3,
.header__title,.hero__title,.home-menu-card__title,.opening__desktop-brand strong,
.route-summary-title,.route-action-btn__copy strong{letter-spacing:var(--tracking-title) !important;}
label,small,figcaption,
.badge,.meta,.filter-chip,.hero__tag,.nav__item span,.map__hint,.map__level,
.opening__loading-label,.opening__desktop-brand small,.info-cell .lbl,
.od-label,.res-meta-label{letter-spacing:var(--tracking-label) !important;}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  background:#e9ece4; color:var(--text);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
h1,h2,h3,p,ol,ul{margin:0;} ol,ul{padding:0; list-style:none;}

/* 모든 기기에서 실제 웹앱 화면을 사용한다. 모바일 목업 프레임은 배포 화면에 노출하지 않는다. */
.frame-wrap{min-height:100vh; min-height:100dvh; width:100%; display:flex; align-items:stretch; justify-content:stretch; padding:0;}
.frame{
  position:relative; width:100%; max-width:none; height:100vh; height:100dvh; min-height:0;
  background:var(--cream); border-radius:0; overflow:hidden; box-shadow:none;
}
.frame__notch{display:none;}

.app{position:relative; height:100%; min-height:0; display:flex; flex-direction:column;}
.app-content{height:100%; min-height:0; display:flex; flex-direction:column;}
.app__scroll{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 8px calc(var(--nav-h) + 12px);}

/* 헤더 */
.header{background:#fff; padding:16px 18px 12px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50;}
.header__brand{display:flex; align-items:center; gap:0;}
.header__home{display:inline-flex; align-items:center; min-height:44px; padding:0 2px; border-radius:10px;}
.header__home:active{background:#eef6e3;}
.header__title{font-size:18px; font-weight:900; color:var(--green-deep); line-height:1.1; letter-spacing:-.045em;}
.header__sub{font-size:11px; color:var(--text-sub); margin-top:1px;}
.header__bell{width:34px; height:34px; border-radius:50%; background:#eef6e3; display:flex; align-items:center; justify-content:center; color:var(--green-dark); font-size:18px;}

/* 첫 화면 */
.home-hero{position:relative; overflow:hidden; border-radius:24px; margin:14px 0 12px; min-height:214px; background:#0f3d24;}
.home-hero__map{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transform:scale(1.08);}
.home-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,61,36,.18),rgba(15,61,36,.82));}
.home-hero__body{position:relative; z-index:1; min-height:214px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px;}
.home-kicker{font-size:12px; font-weight:900; color:#f8d35c; margin-bottom:6px;}
.home-title{font-size:25px; line-height:1.22; font-weight:900; color:#fff;}
.home-copy{font-size:13px; line-height:1.45; color:rgba(255,255,255,.9); margin-top:8px; word-break:keep-all;}
.home-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px;}
.home-primary,.home-secondary{min-height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:900; text-decoration:none;}
.home-primary{background:var(--pink); color:#fff;}
.home-secondary{background:#fff; color:var(--green-deep);}
.home-section-title{font-size:14px; font-weight:900; color:var(--green-deep); margin:16px 2px 8px;}
.home-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.home-tile{width:100%; min-height:82px; padding:12px; border-radius:18px; background:#fff; border:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; text-align:left; text-decoration:none; color:inherit;}
.home-tile .ti{display:none;}
.home-tile__title{font-size:15px; font-weight:900; color:var(--green-deep); line-height:1.2;}
.home-tile__desc{font-size:11px; line-height:1.35; color:var(--text-sub); margin-top:3px; word-break:keep-all;}
.home-tile--wide{grid-column:1 / -1; min-height:72px;}
.home-tile--wide .home-tile__desc{font-size:12px;}
.home-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.home-mini__item{background:#fff; border:1px solid var(--border); border-radius:16px; padding:12px; text-decoration:none; color:inherit;}
.home-mini__label{font-size:11px; font-weight:800; color:var(--text-muted); margin-bottom:5px;}
.home-mini__value{font-size:15px; font-weight:900; color:var(--green-deep);}

/* 홈 메뉴 카드: 첨부 시안의 세로형 안내 메뉴를 반응형으로 확장 */
.home-header{justify-content:center; min-height:78px; padding:12px 26px;}
.home-header .header__home{position:absolute; left:24px;}
.home-menu{padding:14px 22px 20px; background:#fbfcf6; min-height:100%;}
.home-menu__intro{display:flex; align-items:center; justify-content:space-between; max-width:1120px; margin:0 auto 14px; color:var(--green-deep);}
.home-menu__intro p{font-size:18px; font-weight:900; letter-spacing:-.04em;}
.home-menu__map{display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:7px 14px; border-radius:999px; background:#edf3df; color:var(--green-deep); font-weight:800;}
.home-menu-svg{width:1em; height:1em; display:block; overflow:visible; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.home-menu__map .home-menu-svg{width:18px; height:18px;}
.home-menu__cards{display:grid; grid-template-columns:1fr; gap:12px; max-width:1120px; margin:0 auto;}
.home-menu-card{position:relative; display:grid; grid-template-columns:minmax(190px, 44%) 1fr; min-height:178px; overflow:hidden; border:1px solid #dce6d3; border-radius:28px; background:#fffdf4; text-align:left; text-decoration:none; color:var(--green-deep); box-shadow:0 5px 16px rgba(20,83,45,.06);}
.home-menu-card__copy{position:relative; z-index:2; padding:24px 22px; background:linear-gradient(90deg,#fffdf3 0%,#fffdf3 74%,rgba(255,253,243,.82) 100%);}
.home-menu-card__icon{display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin-bottom:12px; border-radius:50%; background:#edf3d9; color:var(--green-deep); font-size:28px;}
.home-menu-card__icon .home-menu-svg{width:28px; height:28px;}
.home-menu-card__title{display:flex; align-items:center; gap:10px; font-size:clamp(24px,2.4vw,30px); font-weight:900; letter-spacing:-.08em; white-space:nowrap;}
.home-menu-card__title-label{flex:0 0 auto; white-space:nowrap; word-break:keep-all;}
.home-menu-card__arrow{flex:0 0 auto; font-size:42px; font-weight:500; line-height:.6;}
.home-menu-card__copy p{margin-top:10px; font-size:15px; line-height:1.55; color:#355447; word-break:keep-all; overflow-wrap:normal;}
.home-menu-card__image{position:absolute; inset:0 0 0 27%; overflow:hidden; opacity:.94;}
.home-menu-card__image picture{position:absolute; inset:0; display:block;}
.home-menu-card__image img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.home-menu-card__image::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,253,243,.96) 0%,rgba(255,253,243,.5) 25%,transparent 55%);}
.home-menu-card--route .home-menu-card__image img{object-position:right center;}
.home-menu-card--route{cursor:pointer;}
@media (min-width:1040px){
  .home-menu{padding-left:34px; padding-right:34px;}
  .home-menu__cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-menu-card{min-height:210px; grid-template-columns:minmax(205px,46%) 1fr;}
  .home-menu-card__image{left:24%;}
  .home-menu-card:last-child{grid-column:1 / -1;}
}
@media (max-width:520px){
  .home-header{min-height:64px;}
  .home-menu{padding:12px 12px 18px;}
  .home-menu__intro p{font-size:15px;}
  .home-menu-card{min-height:158px; grid-template-columns:minmax(174px,52%) 1fr; border-radius:22px;}
  .home-menu-card__copy{padding:17px 14px;}
  .home-menu-card__icon{width:42px; height:42px; font-size:21px; margin-bottom:8px;}
  .home-menu-card__icon .home-menu-svg{width:22px; height:22px;}
  .home-menu-card__title{font-size:23px; gap:7px;}
  .home-menu-card__arrow{font-size:34px;}
  .home-menu-card__copy p{font-size:12px; margin-top:6px;}
  .home-menu-card__image{left:0;}
  .home-menu-card__image img{object-position:center;}
  .home-menu-card--exhibition .home-menu-card__image{left:27%;}
  .home-menu-card--education .home-menu-card__image{left:18%;}
  .home-menu-card--education .home-menu-card__image img{object-position:64% center;}
  .home-menu-card--route .home-menu-card__image{left:27%;}
  .home-menu-card--route .home-menu-card__image img{object-position:74% center;}
  .home-menu-card--facility .home-menu-card__image img{object-position:right center;}
}

/* 에코내비 오프닝: 시안 이미지를 유지하고 실제 버튼 영역을 겹친다. */
.opening{position:relative; width:100%; height:100%; overflow:hidden; display:flex; justify-content:center; background:#f7f9fb; isolation:isolate;}
.opening__canvas{position:relative; width:100%; height:100%; overflow:hidden; background:#f7f9fb;}
.opening__art{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; user-select:none; -webkit-user-drag:none; animation:opening-camera 7s cubic-bezier(.22,.61,.36,1) both; transform-origin:50% 42%;}
.opening__motion{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;}
.opening__halo{position:absolute; left:50%; top:40%; width:52%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.7) 0,rgba(191,225,255,.22) 42%,rgba(255,255,255,0) 70%); transform:translate(-50%,-50%); mix-blend-mode:screen; animation:opening-halo 3.2s ease-in-out infinite;}
.opening__leaf{position:absolute; width:9px; height:5px; border-radius:100% 0 100% 0; background:linear-gradient(135deg,#a9cf47,#3e923b); opacity:0; filter:drop-shadow(0 2px 2px rgba(48,107,50,.16)); animation:opening-leaf 5.6s ease-in-out infinite;}
.opening__leaf--1{left:18%; top:47%; animation-delay:.2s;}
.opening__leaf--2{left:76%; top:43%; animation-delay:1.1s; animation-duration:6.4s;}
.opening__leaf--3{left:27%; top:57%; animation-delay:2.4s; animation-duration:5.1s;}
.opening__leaf--4{left:67%; top:55%; animation-delay:3.2s; animation-duration:6.8s;}
.opening__leaf--5{left:43%; top:36%; animation-delay:4.1s; animation-duration:5.8s;}
.opening__leaf--6{left:83%; top:60%; animation-delay:1.8s; animation-duration:7.2s;}
.opening__leaf--7{left:57%; top:50%; width:7px; height:4px; animation-delay:3.7s; animation-duration:7.6s;}
.opening__loading{position:absolute; left:50%; top:83.8%; width:clamp(220px,58vw,520px); max-width:calc(100% - 40px); padding:12px 10px 13px; display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateX(-50%); background:rgba(250,252,253,.96); box-shadow:0 0 18px 16px rgba(250,252,253,.96);}
.opening__loading-track{display:block; width:100%; height:5px; overflow:hidden; border-radius:999px; background:#dbe0e8; box-shadow:inset 0 1px 2px rgba(84,101,120,.13);}
.opening__loading-fill{display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#8acb31,#65ad2e); transform:scaleX(0); transform-origin:left center; animation:opening-progress 2.2s linear forwards; box-shadow:0 0 7px rgba(102,173,46,.35);}
.opening__loading-label{color:#89909d; font-size:10px; line-height:1; font-weight:800; letter-spacing:.16em; text-indent:.16em; text-shadow:0 1px 1px #fff;}
.opening__desktop-brand{display:none;}
.opening__hotspot{position:absolute; z-index:2; border-radius:999px; color:transparent; background:transparent; transition:background .18s ease, box-shadow .18s ease, transform .12s ease;}
.opening__hotspot:active{transform:scale(.97); background:rgba(255,255,255,.12);}
.opening__hotspot:focus-visible{outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px rgba(14,79,44,.72);}
.opening__start{inset:0; border-radius:0;}
@keyframes opening-camera{0%{transform:scale(1.035) scaleX(1.11); filter:saturate(.92) brightness(.98);}100%{transform:scale(1) scaleX(1.11); filter:saturate(1.04) brightness(1.02);}}
@keyframes opening-halo{0%,100%{opacity:.35; transform:translate(-50%,-50%) scale(.92);}50%{opacity:.85; transform:translate(-50%,-50%) scale(1.08);}}
@keyframes opening-leaf{0%{opacity:0; transform:translate3d(0,18px,0) rotate(-25deg) scale(.7);}16%{opacity:.7;}72%{opacity:.45;}100%{opacity:0; transform:translate3d(28px,-54px,0) rotate(155deg) scale(1.05);}}
@keyframes opening-progress{
  0%{transform:scaleX(0); animation-timing-function:cubic-bezier(.16,1,.3,1);}
  14%{transform:scaleX(.2);}
  28%{transform:scaleX(.2); animation-timing-function:cubic-bezier(.45,0,.2,1);}
  73%{transform:scaleX(.9);}
  87%{transform:scaleX(.9); animation-timing-function:cubic-bezier(.16,1,.3,1);}
  100%{transform:scaleX(1);}
}
@media (min-width:900px){
  .opening__canvas{background:#e7f0f5;}
  .opening__canvas::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(244,249,252,.88) 0%,rgba(244,249,252,.28) 34%,rgba(244,249,252,.06) 68%,rgba(244,249,252,.42) 100%); pointer-events:none;}
  .opening__art{object-fit:cover; object-position:center 43%; filter:saturate(.96) brightness(1.02);}
  .opening__motion{z-index:1;}
  .opening__halo{left:60%; top:49%; width:min(42vw,560px);}
  .opening__loading{left:50%; top:auto; bottom:clamp(48px,9vh,112px); width:clamp(320px,54vw,720px); max-width:calc(100% - 64px); transform:translateX(-50%); align-items:center; background:rgba(248,251,252,.82); box-shadow:0 0 24px 18px rgba(248,251,252,.74);}
  .opening__loading-label{align-self:center; font-size:clamp(11px,.9vw,13px);}
  .opening__desktop-brand{position:absolute; left:50%; top:clamp(56px,12vh,144px); width:min(760px,calc(100% - 64px)); display:flex; align-items:center; justify-content:center; transform:translateX(-50%); color:#12653b; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,.9);}
  .opening__desktop-brand div{display:flex; min-width:0; flex-direction:column; align-items:center; gap:7px;}
  .opening__desktop-brand strong{font-size:clamp(34px,4.6vw,68px); line-height:1; letter-spacing:-.055em; white-space:nowrap;}
  .opening__desktop-brand small{font-size:clamp(11px,1.25vw,17px); font-weight:800; letter-spacing:.08em; white-space:nowrap;}
  .opening__leaf--1{left:8%; top:52%;}.opening__leaf--2{left:88%; top:38%;}.opening__leaf--3{left:24%; top:68%;}.opening__leaf--4{left:74%; top:62%;}.opening__leaf--5{left:46%; top:26%;}.opening__leaf--6{left:94%; top:70%;}.opening__leaf--7{left:57%; top:45%;}
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
@media (prefers-reduced-motion:reduce){
  .opening__hotspot{transition:none;}
  .opening__art,.opening__halo,.opening__leaf,.opening__loading-fill{animation:none;}
  .opening__leaf{display:none;}
  .opening__loading-fill{transform:scaleX(1);}
}

/* 사진 배너 */
.intro{position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:178px; margin:14px 0;}
.intro__photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.intro__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,109,51,0.20) 0%, rgba(31,109,51,0.48) 52%, rgba(20,83,45,0.86) 100%);}
.intro__body{position:relative; padding:18px 16px 16px; padding-right:104px;}
.intro__tag{display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.26); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:9px;}
.intro__headline{font-size:18px; font-weight:800; color:#fff; line-height:1.4; text-shadow:0 1px 5px rgba(0,0,0,.4);}
.intro__desc{font-size:12px; color:rgba(255,255,255,.95); margin-top:7px; line-height:1.55; text-shadow:0 1px 4px rgba(0,0,0,.35);}
.intro__btn{display:inline-flex; align-items:center; gap:4px; margin-top:12px; background:#fff; color:var(--green-dark); font-size:13px; font-weight:700; padding:10px 16px; min-height:44px; border-radius:999px; text-decoration:none;}
.intro__mascots{position:absolute; right:6px; bottom:6px; width:112px; height:64px; pointer-events:none;}
.m-kkyumi{position:absolute; right:50px; bottom:0; width:54px; transform-origin:bottom center; animation:bobA 2.4s ease-in-out infinite;}
.m-pengi{position:absolute; right:2px; bottom:4px; width:50px; transform-origin:bottom center; animation:bobB 2s ease-in-out infinite;}
@keyframes bobA{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-8px) rotate(3deg);}}
@keyframes bobB{0%,100%{transform:translateY(0) rotate(3deg);}50%{transform:translateY(-5px) rotate(-3deg);}}

/* 제목 */
.title-row{display:flex; align-items:center; gap:6px; margin-bottom:10px;}
.title-row .ic{font-size:18px; color:var(--pink);}
.title-row .tt{font-size:15px; font-weight:800; color:var(--green-deep);}

.card{background:var(--card); border-radius:var(--radius); padding:6px; border:1px solid var(--border); margin-bottom:14px;}
.text-card{padding:12px;}

.od-row{position:relative; display:flex; align-items:center; gap:10px; padding:12px; min-height:54px; border-radius:14px; margin-bottom:8px;}
.od-row--from{background:#f3f8ec;} .od-row--to{background:var(--pink-soft);}
.od-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.od-dot--from{background:var(--green); box-shadow:0 0 0 3px rgba(51,160,44,.2);}
.od-dot--to{background:var(--pink); box-shadow:0 0 0 3px rgba(230,23,126,.18);}
.od-label{font-size:12px; color:var(--text-sub); width:38px; flex-shrink:0;}
.od-value{flex:1; font-size:15px; font-weight:700; color:var(--text);}
.od-row--from .od-value{color:var(--green-deep);} .od-row--to .od-value{color:var(--pink-dark);}
.od-select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; appearance:none; border:none; -webkit-appearance:none; font-size:16px;}
.od-drop{display:flex; align-items:center; gap:9px; flex-shrink:0; padding-left:4px; pointer-events:none;}
.od-bar{width:1px; height:22px; background:#cfd4c6;}
.od-arrow{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #8a8f82;}
.swap-row{display:flex; justify-content:center; margin:-2px 0 6px;}
.swap-btn{width:32px; height:32px; border-radius:50%; border:2px solid #f0d38d; background:#fffaf0; color:#14532d; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; box-shadow:0 5px 12px rgba(116,83,22,.14);}
.find-btn{width:100%; margin-top:12px; background:var(--pink); color:#fff; font-size:15px; font-weight:800; padding:14px; min-height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .05s;}
.find-btn:active{transform:scale(.98);}

.notice{padding:16px 18px; border-radius:14px; font-size:15px; font-weight:700; margin-bottom:14px;}
.notice--warn{background:#fef3c7; color:#92400e;} .notice--info{background:#e0f2fe; color:#075985;}
.notice__sub{margin-top:6px; font-size:13px; font-weight:500; opacity:.85;}

.badge{display:inline-block; background:#dcfce7; color:var(--green-deep); font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:8px;}
.res-title{font-size:18px; font-weight:800; margin-bottom:14px;}
.res-meta{display:flex; align-items:center; gap:12px; background:#fdf8ed; border-radius:14px; padding:14px 16px; margin-bottom:14px;}
.res-meta-item{display:flex; flex-direction:column; gap:2px; flex:1;}
.res-meta-label{font-size:12px; color:var(--text-sub); font-weight:600;}
.res-meta-value{font-size:17px; font-weight:800; color:var(--green-deep);}
.res-divider{width:1px; height:32px; background:#ece3cc;}
.steps-title{font-size:13px; font-weight:700; color:var(--green-dark); margin-bottom:8px;}
.steps{counter-reset:s; display:flex; flex-direction:column; gap:10px;}
.step{position:relative; counter-increment:s; padding-left:34px; font-size:14px; line-height:1.55; min-height:26px; display:flex; align-items:center;}
.step::before{content:counter(s); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--green); color:#fff; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}

.map-head{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; margin-bottom:10px; padding:4px 6px 0;}
.map-head .tt{flex-shrink:0; font-size:14px; font-weight:700; color:var(--green-deep);}
.map-actions{display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-left:auto; min-width:0;}
.map__expand{width:36px; height:36px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; background:var(--green-deep); color:#fff; box-shadow:0 4px 10px rgba(20,83,45,.2); transition:transform .16s ease, background .16s ease, box-shadow .16s ease;}
.map__expand svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.map__expand:hover{background:var(--green-dark); box-shadow:0 6px 14px rgba(20,83,45,.24);}
.map__expand:active{transform:scale(.94);}
.map__expand:focus-visible{outline:3px solid rgba(245,166,35,.48); outline-offset:2px;}
.replay{display:inline-flex; align-items:center; gap:3px; flex-shrink:0; background:#eef6e3; color:var(--green-dark); font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; white-space:nowrap;}
.map{position:relative; width:100%; overflow:hidden; border-radius:16px; background:#f7f0dd; aspect-ratio:1400/835; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.map__zoom{position:absolute; inset:0; transition:transform .28s cubic-bezier(.4,0,.2,1); cursor:grab; will-change:transform;}
.map.is-dragging .map__zoom{transition:none; cursor:grabbing;}
.map--surface-zoom{transition:transform .28s cubic-bezier(.4,0,.2,1); will-change:transform;}
.map--surface-zoom .map__zoom{transition:none;}
.map--surface-zoom.is-dragging{transition:none;}
.map--rotated{aspect-ratio:835/1400;}
.map--rotated .map__zoom{inset:auto; left:50%; top:50%; width:167.664%; height:59.643%;}
.map__img{display:block; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none;}
.map__overlay{position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none;}
.map__source-labels{position:absolute; inset:0; z-index:2; pointer-events:none;}
.map__source-label{position:absolute; left:var(--label-x); top:var(--label-y); transform:translate(-50%,-50%) scale(var(--label-scale)); transform-origin:center; display:inline-flex; align-items:center; justify-content:center; min-height:14px; padding:1px 3px; border:1px solid rgba(79,116,64,.3); border-radius:2px; background:rgba(244,248,233,.86); color:#315b34; box-shadow:0 1px 2px rgba(20,83,45,.08); font-size:clamp(5px,.58vw,8px); font-weight:850; line-height:1.05; letter-spacing:-.045em; white-space:nowrap;}
.map__placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#d1fae5,#fef3c7); text-align:center; padding:20px;}
.map__char{position:absolute; width:13%; max-width:58px; transform:translate(-50%,-50%); z-index:5; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));}
.map__landmarks{position:absolute; inset:0; pointer-events:none; z-index:6;}
.map__pin{position:absolute; left:var(--x); top:var(--y); width:22px; height:22px; border-radius:50% 50% 50% 0; transform:translate(-50%,-100%) rotate(-45deg) scale(var(--pin-scale)); transform-origin:50% 100%; background:#e53935; border:2px solid #fff; box-shadow:0 2px 5px rgba(20,83,45,.28);}
.map__pin::after{content:attr(data-num); position:absolute; inset:2px; border-radius:50%; background:#fff; color:#b91c1c; display:flex; align-items:center; justify-content:center; transform:rotate(45deg); font-size:10px; font-weight:900; line-height:1;}
.map__controls{display:flex; align-items:center; gap:3px; flex-shrink:1; min-width:0; padding:3px; border-radius:999px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.1);}
.map__control{min-width:26px; height:26px; padding:0 7px; border-radius:999px; background:#eef6e3; color:var(--green-dark); font-size:13px; font-weight:900; line-height:1; display:inline-flex; align-items:center; justify-content:center;}
.map__control--rotate{width:30px; min-width:30px; padding:0;}
.map__control--rotate svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.map__control:disabled{opacity:.4;}
.map__control--active{background:var(--green-dark); color:#fff;}
.map__control--wide{min-width:34px; font-size:10px; font-weight:800;}
.map__level{min-width:27px; color:var(--green-deep); font-size:11px; font-weight:900; text-align:center;}
.map__hint{font-size:12px; color:var(--text-sub); margin-top:10px; text-align:center;}

.nav{position:absolute; bottom:0; left:0; right:0; min-height:var(--nav-h); background:#fff; border-top:1px solid var(--border); display:flex; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom,0); z-index:100;}
.nav__item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:var(--text-muted); font-size:13px; font-weight:800; min-height:var(--nav-h); text-decoration:none; background:none; border:none; cursor:pointer;}
.nav__item span{white-space:nowrap; letter-spacing:-.04em;}
.nav__item .ic{display:none;}
.nav__item--active{color:var(--green); font-weight:900;}

.placeholder-screen{padding:60px 20px; text-align:center; color:var(--text-sub);}
.placeholder-screen .em{font-size:40px; margin-bottom:10px;}

/* 로딩 / JS 미지원 대비 */
.app-loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--cream); color:var(--green-dark); font-size:14px; font-weight:700; text-align:center; padding:0 24px;}
.app-loading__spinner{width:34px; height:34px; border:3px solid #d7e6c8; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.app-noscript{padding:40px 24px; text-align:center; color:var(--green-deep); font-weight:700; line-height:1.7;}
.app-noscript a{color:var(--pink-dark);}

/* 핵심 정보 띠 */
.info-strip{display:flex; background:#fff; border:1px solid var(--border); border-radius:var(--radius); margin:0 0 14px; overflow:hidden;}
.info-cell{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px; text-align:center; text-decoration:none; color:inherit;}
.info-cell + .info-cell{border-left:1px solid var(--border);}
.info-cell .ic{font-size:19px; color:var(--green);}
.info-cell .lbl{font-size:10px; color:var(--text-muted); font-weight:700; letter-spacing:.2px;}
.info-cell .val{font-size:12px; font-weight:800; color:var(--green-deep); line-height:1.25;}
.info-cell--call .ic{color:var(--pink);}
.info-cell--call .val{color:var(--pink-dark);}
.info-cell--call:active{background:var(--pink-soft);}

/* 실시간 혼잡도 */
.cong-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cong-live{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--green-deep);}
.live-dot{width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
.cong-head-right{display:flex; align-items:center; gap:9px;}
.cong-time{font-size:11px; color:var(--text-muted); font-weight:700;}
.cong-refresh{width:30px; height:30px; border-radius:50%; background:#eef6e3; color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform .25s;}
.cong-refresh:active{transform:rotate(120deg);}
.cong-list{display:flex; flex-direction:column; gap:13px;}
.cong-row-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.cong-name{font-size:13px; font-weight:700; color:var(--text); display:inline-flex; align-items:center; gap:6px;}
.cong-name .ti{color:var(--green); font-size:16px;}
.cong-pill{font-size:11px; font-weight:800; padding:3px 11px; border-radius:999px;}
.cong-pill.is-low{background:#dcfce7; color:#15803d;}
.cong-pill.is-mid{background:#fef3c7; color:#b45309;}
.cong-pill.is-high{background:#fde2ec; color:var(--pink-dark);}
.cong-bar{height:8px; border-radius:999px; background:#eef0e8; overflow:hidden;}
.cong-fill{height:100%; border-radius:999px; transition:width .6s ease;}
.cong-fill.is-low{background:#22c55e;}
.cong-fill.is-mid{background:var(--amber);}
.cong-fill.is-high{background:var(--pink);}
.cong-state{display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 6px; font-size:13px; color:var(--text-sub); font-weight:600; text-align:center;}
.cong-state--err{color:#b45309;}
.cong-spinner{width:18px; height:18px; border:2px solid #d7e6c8; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0;}

/* 터치 영역 확보: 보이는 크기는 유지하고 탭 영역만 최소 44px로 확장 */
.swap-btn, .cong-refresh, .replay{position:relative;}
.swap-btn::after, .cong-refresh::after, .replay::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px;}

/* 공통 히어로 배너 */
.hero{position:relative; overflow:hidden; border-radius:clamp(20px,2.4vw,32px); min-height:clamp(190px,20vw,260px); margin:16px 0 24px; color:#fff; background-color:#155b36; background-image:url("/assets/hero-route-penguin-clean-v3.png?v=route-penguin-clean-3"); background-image:image-set(url("/assets/hero-route-penguin-clean-v3.webp?v=webp-1") type("image/webp"),url("/assets/hero-route-penguin-clean-v3.png?v=route-penguin-clean-3") type("image/png")); background-position:center; background-size:cover; background-repeat:no-repeat; box-shadow:0 14px 30px rgba(20,83,45,.14); isolation:isolate;}
.hero svg{display:none;}
.hero::before{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(225,244,231,.04),rgba(8,50,29,.2));}
.hero::after{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(90deg,rgba(9,58,34,.24) 0%,rgba(14,75,42,.12) 46%,transparent 72%);}
.hero__body{position:relative; z-index:1; padding:clamp(24px,3.8vw,46px); min-height:clamp(190px,20vw,260px); max-width:min(60%,650px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
.hero__tag{display:inline-flex; align-items:center; gap:7px; width:max-content; background:rgba(224,244,229,.24); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:clamp(10px,1vw,13px); font-weight:850; padding:6px 12px; border-radius:999px; margin-bottom:14px;}
.hero__tag .ti{font-size:13px;}
.hero__title{font-size:clamp(27px,3.5vw,44px); font-weight:950; line-height:1.16; letter-spacing:-.06em; text-wrap:balance; text-shadow:0 2px 8px rgba(5,45,26,.28);}
.hero__desc{font-size:clamp(12px,1.25vw,16px); color:rgba(255,255,255,.88); margin-top:12px; line-height:1.5; word-break:keep-all; text-shadow:0 1px 4px rgba(5,45,26,.3);}
.hero--route{background-position:center;}
@media (max-width:560px){
  .hero{min-height:220px; border-radius:24px; background-size:cover; background-position:center;}
  .hero--route{background-position:70% center;}
  .hero::after{background:linear-gradient(90deg,rgba(9,58,34,.44) 0%,rgba(14,75,42,.2) 68%,transparent 100%);}
  .hero__body{min-height:220px; max-width:90%; padding:24px 20px; justify-content:flex-end;}
  .hero__tag{margin-bottom:12px; padding:6px 12px;}
  .hero__title{font-size:28px;}
  .hero__desc{font-size:13px; margin-top:10px;}
}

.route-action-area{margin-top:14px; margin-bottom:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 2px;}
.route-action-btn{min-width:0; min-height:72px; display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:17px; background:#f2f7ec; border:1px solid #dce6d3; color:var(--green-dark); text-align:left; text-decoration:none; transition:background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease; box-shadow:0 6px 16px rgba(20,83,45,.04); cursor:pointer;}
.route-action-btn__icon{flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:#fff; color:var(--green-deep); font-size:20px; box-shadow:0 3px 8px rgba(20,83,45,.07);}
.route-action-btn__svg{width:22px; height:22px; overflow:visible; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round;}
.route-action-btn__svg circle{fill:rgba(47,143,78,.12);}
.route-action-btn__copy{min-width:0; display:flex; flex-direction:column; gap:3px;}
.route-action-btn__copy strong{font-size:13px; line-height:1.25; font-weight:900; letter-spacing:-.035em; word-break:keep-all;}
.route-action-btn__copy small{color:#72806e; font-size:10px; line-height:1.25; font-weight:750; word-break:keep-all;}
.route-action-btn--naver{background:#2d7450; border-color:#2d7450; color:#fff;}
.route-action-btn--naver .route-action-btn__icon{background:rgba(255,255,255,.14); color:#fff; box-shadow:none;}
.route-action-btn--naver .route-action-btn__svg circle{fill:rgba(255,255,255,.16);}
.route-action-btn--naver .route-action-btn__copy small{color:rgba(255,255,255,.72);}
.route-action-btn:active{background:#e3ebd8; transform:scale(.985); border-color:#cbd8c0;}
.route-action-btn--naver:active{background:#286847; border-color:#286847;}
.route-action-btn:focus-visible{outline:3px solid rgba(245,166,35,.48); outline-offset:2px;}

@media (min-width:760px){
  .hero,.route-action-area,.route-control,.route-map-card,.route-summary-card{max-width:1080px; margin-left:auto; margin-right:auto;}
  .hero{min-height:clamp(210px,20vw,260px);}
  .hero__body{min-height:clamp(210px,20vw,260px); padding:clamp(28px,3.8vw,46px);}
  .hero__title{font-size:clamp(32px,3.5vw,44px);}
}
@media (max-width:380px){
  .route-action-btn{min-height:68px; gap:7px; padding:9px 8px;}
  .route-action-btn__icon{width:32px; height:32px; border-radius:10px; font-size:17px;}
  .route-action-btn__copy strong{font-size:12px;}
  .route-action-btn__copy small{font-size:9px;}
}
.map-modal{position:fixed; inset:0; z-index:300; background:#f7fbf2; display:flex; flex-direction:column; padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);}
.map-modal--rotated{inset:auto; top:50%; left:50%; width:100dvh; height:100dvw; padding:0; background:#f7fbf2; transform:translate(-50%,-50%) rotate(90deg); transform-origin:center; overflow:hidden;}
.map-modal--rotated .map-modal__body{background:#f7fbf2; overflow:hidden;}
.map-modal.map-modal--rotated .map{overflow:visible; border-radius:0;}
.map-modal__head{height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; background:#fff; border-bottom:1px solid var(--border); flex-shrink:0;}
.map-modal__title{font-size:16px; font-weight:900; color:var(--green-deep);}
.map-modal__actions{display:flex; align-items:center; gap:8px; min-width:0;}
.map-modal__close{width:34px; height:34px; border-radius:50%; background:#eef6e3; color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900;}
.map-modal__body{flex:1; min-height:0; padding:0; display:flex; align-items:center; justify-content:center; background:#f7fbf2; overflow:hidden;}
.map-modal .map{flex:0 1 auto; width:100%; height:auto; max-width:100%; max-height:100%; border-radius:18px;}
.map-modal .map__img{border-radius:inherit;}
.map-modal .map--route-source{aspect-ratio:1503/553;}
.map-modal .map--route-source .map__img{object-fit:fill;}
@media (orientation:landscape){
  .map-modal:not(.map-modal--rotated) .map{overflow:visible; border-radius:0;}
  .map-modal:not(.map-modal--rotated) .map__img{border-radius:0;}
}
@media (max-width:520px){
  .map-modal__head{height:auto; min-height:56px; align-items:flex-start; padding:10px 12px;}
  .map-modal__title{padding-top:8px; white-space:nowrap;}
  .map-modal__actions{justify-content:flex-end; gap:5px;}
  .map-modal__actions .map__controls{flex-wrap:wrap; justify-content:flex-end; border-radius:14px;}
}
.route-control{position:relative; z-index:12; padding:6px; margin-bottom:10px; border-radius:18px; box-shadow:0 8px 18px rgba(20,83,45,.08);}
.route-control-grid{position:relative; display:grid; grid-template-columns:1fr; gap:16px; align-items:center;}
.route-control .od-row{margin:0; min-height:58px; padding:11px 12px; width:100%;}
.route-control .od-label{width:38px; min-width:38px; font-size:12px;}
.route-control .od-value{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.route-control .od-drop{margin-left:auto;}
.route-control .swap-row{position:absolute; top:66px; left:50%; transform:translate(-50%, -50%); z-index:3; margin:0; pointer-events:none;}
.route-control .swap-btn{width:30px; height:30px; pointer-events:auto;}
.route-control .find-btn{margin-top:10px; background:#c9427b;}
.route-map-card{padding:6px; border-radius:22px; margin-bottom:12px;}
.route-map-card .map{border-radius:18px; aspect-ratio:2.2/1; min-height:0; max-height:430px; margin-left:auto; margin-right:auto; background:#e8edda;}
.route-map-card .map__img{object-fit:fill;}
.route-map-card .map__source-label{font-size:clamp(5px,.52vw,7px);}
.route-map-card .map__hint{margin:10px 6px 2px;}
.route-map-card .map__char{width:16%; max-width:30px;}
.route-summary-card{margin-bottom:12px;}
.route-summary-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.route-summary-title{font-size:16px; font-weight:900; color:var(--green-deep); line-height:1.35;}
.route-empty-map{position:relative; height:390px; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#d1fae5,#fef3c7); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--green-deep); font-weight:900;}
.route-empty-map .ti{font-size:42px; color:var(--green);}
@media (max-width:360px){
  .route-control{padding:6px;}
  .route-control .od-value{font-size:14px;}
  .route-map-card .map{min-height:0;}
}