/* 스테이솔숲 홈페이지 공용 스타일(4차본: Claude Design 인계안 — 흰 바탕, 명조 제목, 한 줄 흐름) */
:root {
  --ink: #1E2821; --body: #2B3A30; --muted: #5B6E5F; --green: #3A5141;
  --line: #E3E7E3; --pale: #F1F4F1; --off: #B9C2BB; --bg: #FFFFFF;
  --serif: "Noto Serif KR", serif;
  --gap: clamp(88px, 12vw, 150px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lock { overflow: hidden; }
body {
  margin: 0; padding-top: 61px; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 16px; line-height: 1.85; -webkit-font-smoothing: antialiased; word-break: keep-all;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
p, figure, dl, dd, ul, ol, address { margin: 0; }
img { max-width: 100%; }
button { font-family: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* 머리말 */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.hd-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px;
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px);
}
.hd-logo { display: flex; align-items: center; gap: 9px; }
.hd-logo img:first-child { width: 30px; height: auto; }
.hd-word { height: 16px; width: auto; }
.hd-nav { display: flex; gap: 28px; align-items: center; }
.hd-nav a { display: none; font-size: 15px; font-weight: 500; }
.hd-nav a[aria-current="page"] { font-weight: 700; }
.hd-nav .hd-book { font-weight: 600; border-bottom: 1px solid var(--ink); line-height: 1.5; }
.hd-r { display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.burger {
  width: 44px; height: 44px; margin-right: -11px; padding: 0; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); }
@media (min-width: 1024px) {
  .hd-nav a { display: inline; }
  .burger, .menu { display: none !important; }
}

/* 펼침 메뉴(1024px 미만) */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; }
.menu-in { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: 0 20px 32px; }
.menu-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; }
.menu-x { justify-self: end; position: relative; width: 44px; height: 44px; margin-right: -11px; padding: 0; background: none; border: 0; cursor: pointer; }
.menu-x span { position: absolute; left: 12px; top: 21px; width: 20px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.menu-x span + span { transform: rotate(-45deg); }
.menu-nav { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--ink); }
.menu-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 24px; line-height: 1.6; }
.menu-btns { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 40px; }

/* 버튼 */
.btn { display: flex; align-items: center; justify-content: center; height: 54px; font-size: 16px; font-weight: 600; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--green); color: #fff; }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--pale); color: var(--ink); }
.more { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--ink); font-size: 15px; font-weight: 600; }

/* 한 줄 흐름 */
.flow { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.flow-home { --gap: clamp(88px, 12vw, 160px); }
.flow-list { --gap: clamp(72px, 10vw, 120px); }
.flow-top { padding: clamp(80px, 10vw, 140px) 0 clamp(88px, 12vw, 140px); }
.flow-end { padding-bottom: clamp(88px, 12vw, 140px); }
.col { width: 100%; max-width: 560px; padding: 0 28px; }
.col-w { max-width: 640px; }

/* 첫 사진 */
.hero { width: 100%; max-width: 1440px; height: 72vh; height: 72svh; min-height: 420px; max-height: 860px; background: var(--line); }
.hero-home { height: calc(100vh - 61px); height: calc(100svh - 61px); min-height: 520px; max-height: 960px; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 사진 L · M · S */
.ph { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ph-l { max-width: 1200px; }
.ph-m { max-width: 720px; }
.ph-s { max-width: 560px; padding: 0 28px; }
.ph-box { width: 100%; background: var(--line); overflow: hidden; }
.ph-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph figcaption { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.strip { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 28px); }

/* 글 */
.poem { display: flex; flex-direction: column; gap: 1.6em; text-align: center; font-size: 17px; color: var(--body); }
.chapter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; }
.chapter h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; }
.intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; }
.intro h1 { font-size: clamp(28px, 3vw, 38px); line-height: 1.45; letter-spacing: -0.02em; }
.theme h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.55; }
.title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: var(--muted); }
.title h1 { font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -0.02em; }
.sub { font-size: 17px; color: var(--body); }

/* 홈 기본 정보 */
.glance { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.facts { width: 100%; border-top: 1px solid var(--ink); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 15px; color: var(--muted); }
.facts dd { font-size: 16px; font-weight: 600; }

/* 예약 묶음 */
.booking { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; padding-bottom: clamp(88px, 12vw, 140px); }
.booking h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.55; letter-spacing: -0.02em; }
.btns { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }

/* 이야기: 조식 재료 */
.breakfast { display: flex; flex-direction: column; }
.breakfast > div { display: flex; flex-direction: column; gap: 12px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.breakfast > div:first-child { border-top: 1px solid var(--ink); }
.breakfast h3 { font-size: 19px; letter-spacing: -0.01em; }
.breakfast p { font-size: 16px; color: var(--body); }

/* 공간 정보 */
.stay-info { display: flex; flex-direction: column; gap: 32px; }
.stay-info .more { align-self: center; }
.specs { border-top: 1px solid var(--ink); }
.specs div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-size: 15px; color: var(--muted); }
.specs dd { font-size: 16px; }
.notes { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--body); }
.info { border-top: 1px solid var(--ink); }
.info div { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.info dt { font-size: 15px; font-weight: 600; }
.info dd { font-size: 16px; color: var(--body); }

/* 이용안내 */
.rules { list-style: none; }
.rules li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.rules li:first-child { border-top: 1px solid var(--ink); }
.rules .no { font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.9; }
.rules li > div { display: flex; flex-direction: column; gap: 8px; }
.rules h2 { font-size: 18px; }
.rules p { font-size: 16px; color: var(--body); }
.price div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.price dt { font-size: 15px; color: var(--body); }
.price dd { font-size: 16px; font-weight: 600; text-align: right; }
.agree { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.agree label { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 16px; font-weight: 500; }
.agree input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.btn-agree { width: 100%; max-width: 320px; }
.btn-agree[aria-disabled="true"], .btn-agree[aria-disabled="true"]:hover { background: var(--off); cursor: not-allowed; }
.manual { display: flex; flex-direction: column; gap: 28px; }
.manual h2 { font-size: clamp(24px, 2.6vw, 30px); text-align: center; letter-spacing: -0.02em; }
.toons { display: flex; flex-direction: column; gap: 12px; }
.toons img { width: 100%; height: auto; display: block; background: var(--pale); }

/* 주변 */
.around-intro { display: flex; flex-direction: column; gap: 1.4em; margin-top: 24px; font-size: 16px; color: var(--body); }
.around-intro .note { font-size: 14px; color: var(--muted); }
.places { display: flex; flex-direction: column; gap: 40px; }
.tabs {
  position: sticky; top: 61px; z-index: 5; background: var(--bg); display: flex; gap: 8px;
  overflow-x: auto; padding: 10px 28px; margin: 0 -28px; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: none; height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; border-radius: 0;
}
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.grp { display: flex; flex-direction: column; }
.grp[hidden] { display: none; }
.grp h2 { font-size: clamp(22px, 2.4vw, 26px); padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.place { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.place-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.place h3 { font-size: 19px; }
.mins { flex: none; font-size: 13px; font-weight: 600; color: var(--green); }
.area { font-size: 13px; color: var(--muted); }
.desc { font-size: 15px; line-height: 1.8; color: var(--body); }
.maplink { align-self: flex-start; padding: 6px 0; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--ink); line-height: 1.5; }

/* 오시는 길 */
.where { display: flex; flex-direction: column; gap: 32px; }
.addr { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.addr address { font-style: normal; font-size: 18px; font-weight: 600; }
.copy { height: 44px; padding: 0 20px; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 0; }
.maps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.maps a { display: flex; align-items: center; justify-content: center; height: 52px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.maps a:hover { background: var(--green); color: #fff; }

/* 꼬리말 */
.ft { border-top: 1px solid var(--line); }
.ft-in {
  max-width: 1440px; margin: 0 auto; padding: 28px clamp(20px, 3vw, 48px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.ft-brand { display: flex; flex-direction: column; gap: 6px; }
.ft-brand > img { height: 14px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.ft-brand address { font-style: normal; color: var(--body); }
.ft-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ft-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ft-sign { display: flex; align-items: center; gap: 10px; }
.ft-sign img { width: 44px; height: 44px; object-fit: contain; }
.ft-sign p { font-size: 12px; line-height: 1.5; }