*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:#FFFFFF;color:#1E2226;font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden}
a{color:#0F6E63;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#1E2226}
h1,h2,h3{margin:0;font-weight:800;line-height:1.25;letter-spacing:-.03em}
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:#D9A21B;color:#1E2226;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:3px solid #D9A21B;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.w{max-width:1140px;margin:0 auto;padding:0 20px}

/* 머리 — 먹색 띠 · 왼쪽 상호(겨자 점) · 오른쪽 메뉴 알약 · 전화 겨자 단추 */
.top{background:#22272C;color:#fff}
.top .w{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.brand::before{content:'';width:12px;height:12px;border-radius:50%;background:#D9A21B;flex:0 0 auto}
.brand small{font-size:11px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.6);margin-left:2px}
.menu{display:flex;gap:4px;margin:0 0 0 auto;padding:0;list-style:none}
.menu a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;color:rgba(255,255,255,.86);text-decoration:none;font-size:14.5px;font-weight:600}
.menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.menu a.on{background:#fff;color:#22272C}
.tel{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;background:#D9A21B;color:#1E2226;text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap}
.tel:hover{background:#E8B32A;color:#1E2226}
.tel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
 .top .w{flex-wrap:wrap;gap:0 10px;padding-top:10px;padding-bottom:8px;min-height:0}
 .tel{margin-left:auto;min-height:38px;padding:0 12px;font-size:14px}
 .menu{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;margin:6px -20px 0;padding:0 20px}
 .menu::-webkit-scrollbar{display:none}
 .menu a{white-space:nowrap;font-size:14px;min-height:36px;padding:0 12px}
}

/* 빵조각 — 들머리 안(어두운 바탕) */
.bc{font-size:13px;color:rgba(255,255,255,.62);padding:14px 0 0}
.bc a{color:rgba(255,255,255,.62);text-decoration:none}
.bc a:hover{color:#fff;text-decoration:underline}
.bc i{font-style:normal;margin:0 7px;color:rgba(255,255,255,.3)}
.bcw{background:#22272C}

/* 들머리 — 먹색 바탕 · 큰 고딕 흰 제목 · 겨자 밑줄 강조 · 오른쪽 숫자 타일 */
.hero{background:#22272C;color:#fff;padding:26px 0 40px}
.hero .w{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:30px 50px;align-items:end}
@media(max-width:900px){.hero .w{grid-template-columns:1fr;gap:22px}}
.kick{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:#D9A21B;margin-bottom:12px;text-transform:uppercase}
h1{font-size:clamp(30px,4.4vw,50px);color:#fff}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,#D9A21B 62%);color:#fff;padding:0 2px}
.lead{font-size:17px;line-height:1.75;color:rgba(255,255,255,.8);margin:18px 0 0;max-width:620px}
.lead b{color:#fff;font-weight:700}
.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:50px;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:800;text-decoration:none}
.bt.f{background:#D9A21B;color:#1E2226}.bt.f:hover{background:#E8B32A;color:#1E2226}
.bt.o{color:#fff;border:1.5px solid rgba(255,255,255,.55)}.bt.o:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.bt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden}
.tiles div{background:#2E343A;padding:18px 16px 16px;min-width:0}
.tiles dt{font-size:12.5px;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.04em}
.tiles dd{margin:4px 0 0;font-size:clamp(17px,1.9vw,24px);font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1.3}
.tiles dd small{font-size:13px;font-weight:600;color:rgba(255,255,255,.6);margin-left:3px}
.tiles dd a{color:#fff;text-decoration:none}
.tiles dd a:hover{text-decoration:underline}
.tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles dd{font-size:17px}}

/* 바로 답(AEO) — 겨자 띠 */
.ans{margin:22px 0 0;padding:16px 20px;border-radius:12px;background:#F6E7B9;color:#1E2226;font-size:16px;line-height:1.7;border-left:6px solid #D9A21B}
.ans b{display:block;font-size:11.5px;letter-spacing:.14em;color:#8A6410;margin-bottom:4px;font-weight:800}
.hero .ans{background:rgba(217,162,27,.16);color:#fff;border-left-color:#D9A21B}
.hero .ans b{color:#D9A21B}

/* 구역 — 왼쪽 겨자 번호칸 + 제목 */
.sec{padding:44px 0 0}
.sh{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.sh .n{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#D9A21B;color:#1E2226;font-size:13px;font-weight:800;letter-spacing:.04em}
.sh h2{font-size:clamp(21px,2.4vw,26px);min-width:0}
.sh h2 em{font-style:normal;color:#0F6E63}
.sh a.more{margin-left:auto;font-size:13.5px;font-weight:600;color:#0F6E63;text-decoration:none;white-space:nowrap;border:1px solid #DDE1E6;border-radius:999px;padding:6px 12px}
.sh a.more:hover{border-color:#0F6E63}
.sub{color:#5A6169;font-size:15px;margin:-6px 0 18px}

/* 시간표 줄 — 왼쪽 라벨 칸 · 오른쪽 내용 */
.tbl{border-top:2px solid #1E2226}
.tbl>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 20px;padding:14px 0;border-bottom:1px solid #DDE1E6}
.tbl>div>b{font-size:13.5px;color:#5A6169;font-weight:700;padding-top:3px}
.tbl>div>div{min-width:0}
@media(max-width:600px){.tbl>div{grid-template-columns:1fr;gap:4px}}

/* 차례 — 가로 네 칸 · 큰 숫자 */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.steps div{counter-increment:s;background:#F3F4F6;border-radius:14px;padding:18px 18px 16px;min-width:0}
.steps b{display:block;font-size:17px;font-weight:800;margin:6px 0 6px}
.steps b::before{content:counter(s);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1E2226;color:#fff;font-size:13px;margin-right:8px;vertical-align:-6px}
.steps p{margin:0;font-size:14.5px;color:#5A6169;line-height:1.65}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 칩 — 둥근 회색, 현재는 먹색 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:#F3F4F6;color:#1E2226;text-decoration:none;font-size:14.5px;font-weight:600}
.chips a:hover{background:#F6E7B9}
.chips a.on{background:#1E2226;color:#fff}
.chips a small{font-weight:500;color:#5A6169;margin-left:5px;font-size:12px}
.chips a.on small{color:rgba(255,255,255,.7)}
.grp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.grp>b{font-size:13.5px;color:#5A6169;font-weight:700;min-width:64px}

/* 지역 탭(details) */
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.tabs{grid-template-columns:1fr}}
.tabs section{border:1px solid #DDE1E6;border-radius:14px;padding:16px 18px 18px;background:#FFFFFF}
.tabs h3{font-size:19px;font-weight:800;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.tabs h3 a{color:#1E2226;text-decoration:none}
.tabs h3 a:hover{color:#0F6E63}
.tabs h3 small{font-size:12.5px;color:#5A6169;font-weight:500}

/* 찾기 */
.find{display:flex;gap:8px;max-width:560px;margin:14px 0 0}
.find input{flex:1;min-width:0;height:50px;padding:0 16px;border:2px solid #1E2226;border-radius:999px;background:#FFFFFF;font:inherit;font-size:16px;color:#1E2226}
.find button{height:50px;padding:0 20px;border:0;background:#1E2226;color:#fff;border-radius:999px;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.find button:hover{background:#2E343A}
.find+small{display:block;color:#5A6169;font-size:13px;margin-top:8px}

/* 코스 표 — 진짜 표(코스·오일·옷·압) */
.ctab{width:100%;border-collapse:collapse;border-top:2px solid #1E2226;font-size:15px}
.ctab th{text-align:left;font-size:12.5px;color:#5A6169;font-weight:700;padding:10px 10px 8px 0;border-bottom:1px solid #DDE1E6}
.ctab td{padding:13px 10px 13px 0;border-bottom:1px solid #DDE1E6;vertical-align:top}
.ctab td.nm a{font-weight:800;color:#1E2226;text-decoration:none;font-size:16px}
.ctab td.nm a:hover{color:#0F6E63;text-decoration:underline}
.ctab td.nm small{display:block;color:#5A6169;font-size:13.5px;font-weight:400;margin-top:3px;line-height:1.55}
.ctab td.c{white-space:nowrap;color:#5A6169;font-size:14px}
.ctab .pill{display:inline-block;padding:2px 9px;border-radius:999px;background:#F3F4F6;font-size:12.5px;font-weight:700;color:#1E2226}
.ctab .pill.y{background:#F6E7B9}
@media(max-width:700px){.ctab td.c,.ctab th.c{display:none}}

/* 값 — 세 타일 */
.ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:600px){.ptiles{grid-template-columns:1fr}}
.ptiles div{border:1px solid #DDE1E6;border-radius:14px;padding:18px 18px 16px}
.ptiles b{display:block;font-size:14px;color:#5A6169;font-weight:700}
.ptiles strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px}
.ptiles strong small{font-size:14px;font-weight:600;color:#5A6169;margin-left:2px}
.ptiles p{margin:0;font-size:14px;color:#5A6169;line-height:1.6}
.ptiles div:nth-child(2){background:#1E2226;color:#fff;border-color:#1E2226}
.ptiles div:nth-child(2) b,.ptiles div:nth-child(2) p,.ptiles div:nth-child(2) strong small{color:rgba(255,255,255,.7)}
.note{font-size:13.5px;color:#5A6169;margin-top:12px}

/* 본문 */
.prose{max-width:760px}
.prose h2{font-size:21px;margin:28px 0 10px}
.prose h3{font-size:17px;margin:20px 0 8px}
.prose p{font-size:16px;line-height:1.85}

/* 물음 — 왼쪽 Q 칸 */
.faq{border-top:2px solid #1E2226;max-width:800px}
.faq details{border-bottom:1px solid #DDE1E6}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:34px minmax(0,1fr) 24px;gap:10px;align-items:start;padding:14px 0;font-size:16px;font-weight:700;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'Q';display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#F6E7B9;color:#8A6410;font-size:13px;font-weight:800}
.faq summary::after{content:'+';font-size:22px;color:#5A6169;line-height:1;justify-self:end;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 16px 44px;font-size:15.5px;color:#1E2226;line-height:1.8;margin:0}

/* 가까운 곳 — 시간표 줄 재사용 */
.near{max-width:800px}

/* 쓴 곳 */
.by{max-width:800px;margin-top:36px;padding:12px 16px;border-radius:12px;background:#F3F4F6;font-size:13.5px;color:#5A6169;display:flex;flex-wrap:wrap;gap:4px 18px}
.by a{color:#5A6169}

/* 그림 — 점 지도(어두운 틀) */
.map{border-radius:14px;overflow:hidden;background:#22272C;padding:6px}
.map svg{width:100%;height:auto}

/* 읽을거리 목록 — 카드 두 줄 */
.glist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:700px){.glist{grid-template-columns:1fr}}
.glist li{border:1px solid #DDE1E6;border-radius:14px;padding:16px 18px}
.glist a{font-size:17px;font-weight:800;color:#1E2226;text-decoration:none}
.glist a:hover{color:#0F6E63;text-decoration:underline}
.glist p{margin:6px 0 0;font-size:14px;color:#5A6169;line-height:1.6}

/* 약속 — 번호 타일 */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:r}
@media(max-width:760px){.rules{grid-template-columns:1fr}}
.rules div{counter-increment:r;background:#F3F4F6;border-radius:14px;padding:18px}
.rules b{display:block;font-size:16.5px;font-weight:800;margin-bottom:6px}
.rules b::before{content:counter(r,decimal-leading-zero);display:block;font-size:12px;color:#8A6410;letter-spacing:.1em;margin-bottom:8px}
.rules p{margin:0;font-size:14.5px;color:#5A6169;line-height:1.65}

/* 기록 */
.log{list-style:none;margin:0;padding:0;border-top:2px solid #1E2226;max-width:800px}
.log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 14px;padding:12px 0;border-bottom:1px solid #DDE1E6;font-size:15px}
.log time{color:#5A6169;font-size:13.5px;font-weight:600}

/* 꼬리 — 먹색 */
footer{margin-top:64px;background:#22272C;color:rgba(255,255,255,.72);padding:34px 0 40px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px 32px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer h2{font-size:12px;letter-spacing:.14em;color:#D9A21B;font-weight:800;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 6px}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline;color:#D9A21B}
footer .cp{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.55)}
footer .cp p{margin:0 0 4px}

/* 모바일 바닥 — 겨자 전화 하나 크게 + 동 찾기 */
.mbar{display:none}
@media(max-width:760px){
 body{padding-bottom:74px}
 .mbar{display:grid;grid-template-columns:1fr 2fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#22272C}
 .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;font-size:15.5px;font-weight:800;text-decoration:none}
 .mbar a.f{background:#D9A21B;color:#1E2226}
 .mbar a.o{color:#fff;border:1.5px solid rgba(255,255,255,.5)}
 .mbar svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}