@font-face{font-family:"Pretendard";font-weight:400;font-display:swap;src:url(/assets/pretendard-400.woff) format("woff")}
@font-face{font-family:"Pretendard";font-weight:600;font-display:swap;src:url(/assets/pretendard-600.woff) format("woff")}
@font-face{font-family:"Pretendard";font-weight:700;font-display:swap;src:url(/assets/pretendard-700.woff) format("woff")}
@font-face{font-family:"Pretendard";font-weight:500;font-display:swap;src:url(/assets/pretendard-400.woff) format("woff")}

/* 레이아웃: 잡지 지면처럼 — 큰 코스 사진, 이름과 숫자 4개, 그 아래로 왼쪽 소제목 / 오른쪽 본문의 2단이 이어진다. 카드 대신 여백과 가는 선으로 나눈다 */
:root{
  color-scheme:light;
  --teal:#1A9CBF; --teal-d:#126F8A; --green:#14935A; --sky:#E8F6FB;
  --ink:#10202B; --ink-2:#34434E; --soft:#66737C; --muted:#98A6AE;
  --paper:#FFFFFF; --wash:#F4F8F9; --rule:#DCE4E8;
  --f:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 16px/1.7 var(--f);-webkit-font-smoothing:antialiased;letter-spacing:-.012em}
a{color:inherit;text-decoration:none}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.col{max-width:1040px;margin:0 auto}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* 머리 */
.mast{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;border-bottom:1px solid var(--rule)}
.mast .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.mast .logo img{width:26px;height:26px;border-radius:7px}
.mast .where{font-size:13px;color:var(--soft)}
.mast .where a{color:var(--ink-2)}
.mast .dl{font-size:13px;font-weight:600;color:var(--teal-d)}

/* 사진 */
.lead{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:center;padding-block:36px 32px}
.photo{margin:0;position:relative}
.photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--wash)}
.photo figcaption{display:flex;flex-direction:column-reverse;gap:8px;margin-top:10px;font-size:12px;color:var(--muted)}
.thumbs{display:flex;gap:6px}
.thumbs button{padding:0;border:0;background:none;cursor:pointer;width:44px;border-radius:3px;overflow:hidden;opacity:.55;transition:opacity .15s}
.thumbs button[aria-current="true"],.thumbs button:hover{opacity:1}
.thumbs button[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.thumbs img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* 제목 */
.title{min-width:0}
.kicker{font-size:13px;font-weight:600;color:var(--teal-d);letter-spacing:.02em}
h1{margin:6px 0 0;font-size:clamp(44px,8vw,76px);line-height:1;font-weight:700;letter-spacing:-.045em;text-wrap:balance}
.addr{margin:14px 0 0;font-size:16px;color:var(--ink-2)}
.app-k{display:flex;align-items:center;gap:8px}
.roundy{width:40px;height:auto}

/* 숫자 네 개 */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.spec div{padding:18px 0 16px;min-width:0}
.spec div+div{padding-left:20px;border-left:1px solid var(--rule)}
.spec b{display:block;font-size:clamp(24px,3.4vw,34px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.spec b small{font-size:.5em;font-weight:600;margin-left:2px;letter-spacing:0}
.spec span{font-size:13px;color:var(--soft)}

/* 2단 지면 */
.sec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding-block:44px;border-bottom:1px solid var(--rule);scroll-margin-top:16px}
.sec>h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.5}
.sec>h2 span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.body{min-width:0;display:grid;gap:20px;align-content:start}
.prose{margin:0;font-size:18px;line-height:1.75;color:var(--ink-2);max-width:36em}
.prose b{color:var(--ink);font-weight:600}

/* 정보 표 */
dl.facts{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);border-top:1px solid var(--rule)}
dl.facts dt,dl.facts dd{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
dl.facts dt{font-size:14px;color:var(--soft)}
dl.facts dd{font-weight:500;display:flex;justify-content:space-between;gap:12px;align-items:baseline;min-width:0}
dl.facts dd small{font-size:13px;color:var(--soft);font-weight:400}
dl.facts a{color:var(--teal-d);font-weight:600}
.copy{flex:none;font:600 12px var(--f);color:var(--teal-d);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:6px;border:1px solid var(--rule);font-size:14px;font-weight:600}
.links a.main{background:var(--ink);border-color:var(--ink);color:#fff}

/* 가는 길 */
table.route{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.route th,.route td{text-align:left;padding:14px 0;border-bottom:1px solid var(--rule);font-weight:400}
.route thead th{font-size:13px;color:var(--soft);padding-top:0}
.route td.t{font-size:22px;font-weight:600;letter-spacing:-.02em}
.route td.n{text-align:right;color:var(--ink-2)}
.route th.n{text-align:right}
.route tbody th{font-weight:600}
.aside{margin:0;font-size:14px;color:var(--soft)}

/* 맛집 */
.dishes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
.dishes a{display:grid;gap:8px;align-content:start}
.dishes img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--wash);transition:opacity .15s}
.dishes a:hover img{opacity:.88}
.dishes b{font-size:16px;font-weight:600;line-height:1.3}
.dishes span{font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.menu{margin:0;padding:0;list-style:none;columns:2;column-gap:40px}
.menu li{break-inside:avoid}
.menu a{display:flex;align-items:baseline;gap:8px;padding:9px 0}
.menu a .nm{font-weight:600}
.menu a .c{font-size:13px;color:var(--soft)}
.menu a .dots{flex:1;border-bottom:1px dotted var(--muted);transform:translateY(-4px);min-width:16px}
.menu a .d{font-variant-numeric:tabular-nums;color:var(--green);font-weight:600}

/* 앱 */
.app{background:var(--sky)}
.app .in{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:center;padding-block:48px 0}
.app h2{margin:6px 0 10px;font-size:clamp(26px,4vw,36px);line-height:1.25;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.app p{margin:0 0 20px;font-size:16px;color:var(--ink-2);max-width:30em}
.app .shot{align-self:end;width:100%;max-width:240px;display:block;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px -20px rgba(16,32,43,.35)}
.stores{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:48px}
.stores a{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.stores svg{width:18px;height:18px;fill:#fff}

/* 후기 */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin:0;padding:0;list-style:none}
.quotes a{display:grid;gap:10px}
.quotes q{font-size:17px;line-height:1.65;color:var(--ink);quotes:"“" "”"}
.quotes q::before{content:open-quote;font-size:44px;line-height:0;vertical-align:-18px;color:var(--teal);margin-right:4px;font-weight:700}
.quotes q::after{content:close-quote}
.quotes .by{font-size:13px;color:var(--soft)}
.quotes .by b{color:var(--ink-2);font-weight:600}
.quotes .by u{text-underline-offset:3px;color:var(--teal-d)}

/* 주변 */
.spots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spots a{display:grid;gap:8px}
.spots img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
.spots b{font-size:15px;font-weight:600}
.spots span{font-size:13px;color:var(--soft)}
.near{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.near a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:600}
.near a span{font-weight:400;color:var(--soft);font-variant-numeric:tabular-nums}

/* 같이 갈 사람 */
.join{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.join p{margin:0;font-size:17px;color:var(--ink-2);max-width:30em}
.join button{height:46px;padding:0 20px;border-radius:8px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:600 15px var(--f);cursor:pointer}
.join button[disabled]{border-color:var(--rule);color:var(--soft);cursor:default}

/* 질문 */
.faq details{border-bottom:1px solid var(--rule);padding:16px 0}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font-size:17px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--soft)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:10px 0 0;color:var(--ink-2);max-width:38em}

footer{padding-block:28px 48px;font-size:13px;color:var(--muted);display:grid;gap:4px}
footer b{color:var(--ink-2);font-weight:600}

@media (max-width:760px){
  .sec{grid-template-columns:1fr;gap:16px;padding-block:36px}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec div:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .spec div:nth-child(4){border-top:1px solid var(--rule)}
  .lead{grid-template-columns:1fr;gap:20px;padding-block:28px 24px}
  .photo img{aspect-ratio:3/2}
  .dishes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu{columns:1}
  .quotes,.near{grid-template-columns:1fr}
  .spots{grid-template-columns:repeat(2,minmax(0,1fr))}.spots a:nth-child(3){display:none}
  .app .in{grid-template-columns:minmax(0,1fr) 120px;gap:16px;padding-block:36px 0}
  .stores{padding-bottom:36px}
  .mast .where{display:none}
  .prose{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.lead.solo{grid-template-columns:1fr}
.idx{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.idx a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:600}
.idx a span{font-weight:400;color:var(--soft);font-size:14px;font-variant-numeric:tabular-nums}
.sec>h2 a{color:inherit}
@media (max-width:760px){.idx{grid-template-columns:1fr}}