*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:#F3F6F9;color:#3D4854;font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;font-size:15.5px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden}
a{color:#3B4CCA;text-decoration:none}
a:hover{color:#2E3DA6;text-decoration:underline}
h1,h2,h3{margin:0;color:#1B2430;font-weight:700;line-height:1.3;letter-spacing:-.02em}
p{margin:0 0 1em}
svg{display:block}
.sro{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#3B4CCA;color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #C7441F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.w{max-width:1140px;margin:0 auto;padding:0 20px}

/* 머리 — 붙박이 흰 띠 · 상호 + 알약 · 메뉴 셋 · 산호 전화 */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #DEE4EC}
.top .w{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:inline-flex;align-items:center;gap:8px;color:#1B2430;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.03em;white-space:nowrap}
.brand:hover{text-decoration:none;color:#1B2430}
.brand i{width:10px;height:10px;border-radius:50%;background:#C7441F;box-shadow:0 0 0 4px #FFF1EA}
.brand small{font-size:11px;font-weight:700;color:#3B4CCA;background:#E9ECFB;border-radius:999px;padding:3px 9px;letter-spacing:.06em}
.nav{display:flex;gap:6px;list-style:none;margin:0 0 0 8px;padding:0}
.nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;color:#3D4854;font-weight:600;font-size:15px}
.nav a:hover{background:#E9ECFB;color:#2E3DA6;text-decoration:none}
.nav a.on{background:#1B2430;color:#fff}
.call{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;background:#C7441F;color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.call:hover{background:#9E3415;color:#fff;text-decoration:none}
.call svg{width:16px;height:16px;fill:currentColor}
@media(max-width:860px){
 .top .w{height:56px;gap:12px}
 .brand{font-size:19px}.brand small{display:none}
 .nav{margin-left:auto;gap:0}.nav a{padding:0 9px;font-size:13.5px;min-height:36px}
 .call{padding:0;width:40px;height:40px;min-height:0;justify-content:center;margin-left:0}.call span{display:none}
}
@media(max-width:400px){.nav a{padding:0 6px;font-size:12.5px}}

/* 빵조각 */
.bc{font-size:13px;color:#5F6B7A;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 0}
.bc a{color:#5F6B7A}
.bc i{font-style:normal;margin:0 7px;color:#C9D2DD}

/* 들머리 — 글 + 차례 카드 */
.hero{padding:44px 0 8px}
.hero .w{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px 48px;align-items:center}
@media(max-width:860px){.hero{padding-top:24px}.hero .w{grid-template-columns:1fr;gap:20px}}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#3B4CCA;letter-spacing:.04em;margin-bottom:12px}
.kick::before{content:'';width:18px;height:2px;background:#C7441F}
h1{font-size:clamp(28px,4.2vw,46px);font-weight:800}
h1 em{font-style:normal;color:#3B4CCA}
h1 mark{background:linear-gradient(transparent 60%,#FFF1EA 60%);color:inherit}
.lead{font-size:17px;line-height:1.8;margin:16px 0 0;max-width:560px;color:#3D4854}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent}
.bt:hover{text-decoration:none}
.bt.f{background:#C7441F;color:#fff}.bt.f:hover{background:#9E3415;color:#fff}
.bt.o{background:#fff;color:#1B2430;border-color:#C9D2DD}.bt.o:hover{border-color:#3B4CCA;color:#3B4CCA}
.bt svg{width:16px;height:16px;fill:currentColor}

/* 차례 카드(세로 점선) */
.stepcard{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:20px;padding:26px 28px;box-shadow:0 14px 40px rgba(27,36,48,.07)}
.stepcard h2{font-size:15px;color:#5F6B7A;font-weight:700;letter-spacing:.04em;margin-bottom:14px}
.stepcard ol{list-style:none;margin:0;padding:0;counter-reset:s;position:relative}
.stepcard ol::before{content:'';position:absolute;left:13px;top:10px;bottom:14px;border-left:2px dashed #C9D2DD}
.stepcard li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 14px;padding:0 0 18px;position:relative}
.stepcard li:last-child{padding-bottom:0}
.stepcard li::before{grid-column:1;grid-row:1;content:counter(s);width:28px;height:28px;border-radius:50%;background:#C7441F;color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
.stepcard b{grid-column:2;display:block;font-size:16px;color:#1B2430;margin-top:2px}
.stepcard p{grid-column:2;margin:2px 0 0;font-size:14px;color:#5F6B7A;line-height:1.65}
.stepcard .tel{margin:18px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#FFF1EA;border-radius:12px;padding:12px 16px;font-weight:800;color:#9E3415;font-size:20px;letter-spacing:-.01em;white-space:nowrap}
@media(max-width:400px){.stepcard .tel{font-size:17px;flex-wrap:wrap;gap:2px}.stepcard .tel small{white-space:normal}}
.stepcard .tel small{font-size:12.5px;font-weight:600;color:#5F6B7A}

/* 수첩 메모(한 줄 답) */
.memo{margin:28px 0 0;background:#FFFFFF;border:1px solid #DEE4EC;border-left:4px solid #C7441F;border-radius:0 14px 14px 0;padding:16px 20px;display:flex;gap:14px;align-items:flex-start}
.memo b{flex:0 0 auto;font-size:11.5px;letter-spacing:.14em;color:#9E3415;font-weight:800;padding-top:4px}
.memo p{margin:0;font-size:16px;line-height:1.75;color:#1B2430;flex:1}
.memo a.bt{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
@media(max-width:860px){.memo{flex-wrap:wrap;gap:8px 14px}.memo a.bt{width:100%}}

/* 구역 머리 */
.sec{padding:52px 0 0}
.sh{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.sh .n{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#C7441F;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.sh h2{font-size:clamp(21px,2.4vw,28px)}
.sh a.more{margin-left:auto;font-size:13.5px;color:#5F6B7A;white-space:nowrap}
.sh a.more:hover{color:#3B4CCA}
.sub{color:#5F6B7A;font-size:15px;margin:-8px 0 18px;max-width:760px}
@media(max-width:860px){.sec{padding-top:36px}}

/* 도시 타일 넷 */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
@media(max-width:860px){.tiles{grid-template-columns:1fr 1fr;gap:10px}}
.tile{display:block;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:16px;padding:20px 20px 16px;color:#1B2430;min-height:150px;transition:border-color .15s,transform .15s}
.tile:hover{border-color:#3B4CCA;text-decoration:none;transform:translateY(-2px);color:#1B2430}
.tile b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.tile small{display:block;font-size:12.5px;color:#5F6B7A;margin:2px 0 12px}
.tile .gs{display:flex;flex-wrap:wrap;gap:4px}
.tile .gs span{font-size:12px;color:#2E3DA6;background:#E9ECFB;border-radius:6px;padding:2px 8px}
.tile .cnt{display:block;margin-top:12px;font-size:13px;color:#5F6B7A}
.tile .cnt::after{content:' ›';color:#C7441F;font-weight:800}

/* 줄 목록(동·역) */
.rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:16px;padding:6px 22px}
@media(max-width:860px){.rows{grid-template-columns:1fr;gap:0;padding:4px 14px}}
.rows li{border-bottom:1px solid #DEE4EC}
.rows li:nth-last-child(-n+2){border-bottom:0}
@media(max-width:860px){.rows li:nth-last-child(2){border-bottom:1px solid #DEE4EC}}
.rows a{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 0;color:#1B2430}
.rows a:hover{text-decoration:none;color:#3B4CCA}
.rows a::before{content:'';flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#3B4CCA;opacity:.7}
.rows a.on::before{background:#C7441F;opacity:1}
.rows b{font-weight:600;font-size:15.5px}
.rows small{color:#5F6B7A;font-size:12.5px;margin-left:auto;white-space:nowrap}
.rows a::after{content:'›';color:#C9D2DD;font-weight:800;font-size:18px;margin-left:8px}
.rows.one{grid-template-columns:1fr}.rows.one li:nth-last-child(2){border-bottom:1px solid #DEE4EC}.rows.one li:last-child{border-bottom:0}

/* 상세 — 왼쪽 고정 요약판 + 오른쪽 본문 */
.page{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start;margin-top:20px}
@media(max-width:960px){.page{grid-template-columns:1fr;gap:18px}}
.side{position:sticky;top:80px;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:20px;padding:22px 22px 18px}
@media(max-width:960px){.side{position:static}}
.side .tag{display:inline-block;font-size:12px;font-weight:700;color:#2E3DA6;background:#E9ECFB;border-radius:6px;padding:3px 9px;margin:0 4px 6px 0}
.side dl{margin:14px 0 0;display:grid;grid-template-columns:84px 1fr;gap:0 10px}
.side dt{font-size:12.5px;color:#5F6B7A;padding:9px 0;border-top:1px solid #DEE4EC}
.side dd{margin:0;font-size:14.5px;color:#1B2430;padding:9px 0;border-top:1px solid #DEE4EC}
.side dt:first-of-type,.side dd:first-of-type{border-top:0}
.side dd a{font-weight:600}
.side .acts{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side .acts .bt{min-height:44px;padding:0 10px;font-size:14px}
.main{min-width:0}
.main .head{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:20px;padding:26px 28px 22px}
.main .head h1{font-size:clamp(26px,3.4vw,38px)}
.main .head .lead{font-size:16px;margin-top:10px;max-width:none}
@media(max-width:600px){.main .head{padding:18px 18px 16px}}

/* 번호 레일 본문 */
.blk{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;margin-top:26px}
.blk>.num{width:44px;height:44px;border-radius:12px;background:#FFFFFF;border:1px solid #DEE4EC;display:grid;place-items:center;font-weight:800;color:#3B4CCA;font-size:14px;font-variant-numeric:tabular-nums}
.blk>div:last-child{min-width:0}
.blk h2{font-size:21px;margin:8px 0 12px}
.blk .prose p{font-size:16px;line-height:1.85;margin:0 0 1em}
.blk .prose p:last-child{margin-bottom:0}
@media(max-width:600px){.blk{grid-template-columns:36px 1fr;gap:0 10px}.blk>.num{width:36px;height:36px;border-radius:10px;font-size:13px}.blk h2{font-size:19px;margin-top:5px}}

/* 코스 줄 */
.clist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:860px){.clist{grid-template-columns:1fr}}
.clist li{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.clist li:hover{border-color:#3B4CCA}
.clist a.nm{font-weight:700;font-size:16px;color:#1B2430}
.clist a.nm:hover{color:#3B4CCA;text-decoration:none}
.clist .mt{grid-column:1/-1;font-size:13.5px;color:#5F6B7A;line-height:1.6}
.clist .pz{font-size:12px;font-weight:700;color:#9E3415;background:#FFF1EA;border-radius:6px;padding:3px 8px;white-space:nowrap}

/* 값 표 */
.price{width:100%;border-collapse:separate;border-spacing:0;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;overflow:hidden}
.price th,.price td{text-align:left;padding:15px 16px;border-bottom:1px solid #DEE4EC;font-weight:400;vertical-align:middle}
.price tr:last-child th,.price tr:last-child td{border-bottom:0}
.price th{width:110px;font-weight:700;color:#1B2430;background:#E9ECFB}
.price td.v{width:160px;font-weight:800;font-size:20px;color:#3B4CCA;white-space:nowrap}
.price td.v small{font-size:12.5px;color:#5F6B7A;font-weight:500;margin-left:2px}
.price td.d{color:#5F6B7A;font-size:14.5px}
@media(max-width:600px){.price td.d{display:none}.price td.v{width:auto;text-align:right}}
.note{font-size:13.5px;color:#5F6B7A;margin-top:10px}

/* 묻고 답 */
.faq{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;padding:0 18px}
.faq details{border-bottom:1px solid #DEE4EC}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:flex-start;padding:15px 0;font-size:15.5px;font-weight:700;color:#1B2430;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q.';color:#C7441F;font-weight:800;flex:0 0 auto}
.faq summary::after{content:'';margin-left:auto;flex:0 0 10px;width:10px;height:10px;border-right:2px solid #5F6B7A;border-bottom:2px solid #5F6B7A;transform:rotate(45deg);margin-top:6px;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:10px}
.faq .a{margin:0;padding:0 0 16px 26px;font-size:15px;color:#3D4854;line-height:1.8}

/* 칩 */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 13px;border-radius:999px;background:#FFFFFF;border:1px solid #C9D2DD;color:#1B2430;font-size:14px}
.chips a:hover{border-color:#3B4CCA;color:#3B4CCA;text-decoration:none}
.chips a.on{background:#1B2430;border-color:#1B2430;color:#fff}
.chips small{color:#5F6B7A;font-size:12px}

/* 가까운 곳 */
.near{margin:0;display:grid;grid-template-columns:110px 1fr;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;overflow:hidden}
.near dt{font-size:13px;color:#5F6B7A;font-weight:700;padding:12px 14px;border-bottom:1px solid #DEE4EC;background:#F3F6F9}
.near dd{margin:0;padding:12px 14px;border-bottom:1px solid #DEE4EC;font-size:15px;line-height:1.9}
.near dt:last-of-type,.near dd:last-of-type{border-bottom:0}
.near dd a{color:#1B2430}
.near dd a:hover{color:#3B4CCA}
.near dd i{font-style:normal;color:#C9D2DD;margin:0 8px}
.near dd small{color:#5F6B7A;font-size:12.5px}
@media(max-width:600px){.near{grid-template-columns:1fr}.near dt{border-bottom:0;padding-bottom:2px}.near dd{padding-top:2px}}

/* 점 지도 */
.map{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;padding:10px}
.map svg{width:100%;height:auto}

/* 안내 글 · 원칙 · 기록 */
.glist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:860px){.glist{grid-template-columns:1fr}}
.glist li{background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;padding:16px 18px}
.glist a{font-weight:700;font-size:16px;color:#1B2430}
.glist a:hover{color:#3B4CCA}
.glist p{margin:4px 0 0;font-size:14px;color:#5F6B7A}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:r}
@media(max-width:860px){.rules{grid-template-columns:1fr}}
.rules div{counter-increment:r;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px;padding:18px 20px}
.rules b{display:block;font-size:16px;color:#1B2430;margin-bottom:6px}
.rules b::before{content:counter(r,decimal-leading-zero) '  ';color:#C7441F;font-size:12px;letter-spacing:.1em}
.rules p{margin:0;font-size:14px;color:#5F6B7A;line-height:1.7}
.prose{max-width:800px}
.prose p{font-size:16px;line-height:1.85}
.log{list-style:none;margin:0;padding:0;background:#FFFFFF;border:1px solid #DEE4EC;border-radius:14px}
.log li{display:grid;grid-template-columns:110px 1fr;gap:0 14px;padding:13px 18px;border-bottom:1px solid #DEE4EC;font-size:15px}
.log li:last-child{border-bottom:0}
.log time{color:#5F6B7A;font-size:13.5px}
.by{margin-top:34px;font-size:13px;color:#5F6B7A;display:flex;flex-wrap:wrap;gap:4px 18px}
.by a{color:#5F6B7A}

/* 꼬리 — 짙은 남색 */
footer{margin-top:70px;background:#1E2550;color:#C9CEE8;padding:38px 0 42px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px 32px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
footer h2{font-size:12px;letter-spacing:.14em;color:#8E97C9;font-weight:700;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 6px}
footer a{color:#fff}
footer a:hover{color:#FFB39C}
footer .brand{color:#fff;margin-bottom:10px}
footer .brand small{background:rgba(255,255,255,.12);color:#fff}
footer .cp{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:#A6ADD6}
footer .cp p{margin:0 0 4px}

/* 모바일 바닥 */
.mbar{display:none}
@media(max-width:860px){
 body{padding-bottom:74px}
 .mbar{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #DEE4EC;backdrop-filter:blur(8px)}
 .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;font-size:15px;font-weight:700;text-decoration:none}
 .mbar a.o{background:#E9ECFB;color:#2E3DA6}
 .mbar a.f{background:#C7441F;color:#fff}
 .mbar svg{width:16px;height:16px;fill:currentColor}
}