/* 햇살클린 — 공통 토큰 · 머리 · 바닥 · 동그라미 · 하단 고정 · 사진판 · 기본 모션 */
@font-face { font-family: 'Pretendard'; src: url('/assets/fonts/pretendard.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Sunflower'; src: url('/assets/fonts/sunflower-b.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'AstaSans'; src: url('/assets/fonts/asta-xb.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --paper: #ffffff; --sky: #eaf4fa; --mist: #f2f5f7;
  --ink: #10202e; --ink-2: #45586a;
  --water: #0088c8; --action: #0070ad; --sun: #f6d84a;
  --navy: #0b2a44; --navy-2: #163c5e; --on-navy: #f3f7fa; --on-navy-2: #a9c0d3;
  --body: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --gut: 40px; --maxw: 1360px; --top: 76px;
  --t-body: 18px; --t-small: 14px; --t-h3: 26px;
  --float: 0 12px 32px rgba(11, 42, 68, .18);
  --sec: 84px;
}
.b { --head: 'Sunflower', var(--body); --hw: 700; --r: 24px; }
.a { --head: 'AstaSans', var(--body); --hw: 800; --r: 20px; }
@media (max-width: 1023px) { :root { --top: 60px; --sec: 72px; } }
@media (max-width: 760px) { :root { --gut: 16px; --t-body: 16px; --t-h3: 21px; --sec: 52px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--top); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.62; word-break: keep-all; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--head); font-weight: var(--hw); }
h1 { font-size: clamp(36px, 4.6vw, 70px); line-height: 1.14; letter-spacing: -.045em; }
h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -.035em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.02em; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.dot { position: relative; padding-left: 22px; }
.dot::before { content: ''; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--sun); }
.pc-only { display: initial; } .mo-only { display: none; }
@media (max-width: 760px) { .pc-only { display: none; } .mo-only { display: initial; } }

/* ── 머리 ── */
.top { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 rgba(16, 32, 46, .06); }
.top__in { display: flex; align-items: center; gap: 28px; height: var(--top); }
.top__logo { display: flex; align-items: center; min-height: 44px; }
.top__logo img { height: 46px; width: auto; }
.top__nav { display: flex; gap: 8px; margin-left: auto; }
.top__nav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 10px; }
.top__nav a:hover { color: var(--action); }
.top__nav a[aria-current="page"] { color: var(--action); box-shadow: inset 0 -3px 0 var(--sun); border-radius: 0; }
.top__nav .mo-link { display: none; }
.top__cta { min-height: 46px; padding: 0 22px; color: #fff; }
.b .top__cta { background: var(--navy); }
.b .top__cta:hover { background: var(--navy-2); }
.a .top__cta { background: var(--action); }
.a .top__cta:hover { background: #005d90; }
.top__menu { display: none; }
@media (max-width: 1180px) { .top__nav a { padding: 0 8px; font-size: 15px; } .top__in { gap: 16px; } }
@media (max-width: 1023px) {
  .top__logo img { height: 34px; }
  .top__nav { display: none; }
  .top__cta { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .top__menu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; cursor: pointer; }
  .menu-open .top__nav { display: flex; flex-direction: column; gap: 8px; position: absolute; top: var(--top); left: 0; right: 0; background: #fff; padding: 8px var(--gut) 20px; box-shadow: var(--float); max-height: calc(100svh - var(--top)); overflow: auto; }
  .menu-open .top__nav a { min-height: 48px; font-size: 17px; padding: 0 8px; }
  .menu-open .top__nav .mo-link { display: flex; }
}

/* ── 버튼 ── */
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.hs-btn svg { width: 20px; height: 20px; flex: none; }
.hs-btn:active { transform: scale(.96); }
.hs-btn--fill { background: var(--action); color: #fff; }
.hs-btn--fill:hover { background: #005d90; }
.hs-btn--sun { background: var(--sun); color: var(--navy); }
.hs-btn--sun:hover { background: #ffe36b; }
.hs-btn--navy { background: var(--navy); color: #fff; }
.hs-btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.hs-btn.is-done { background: var(--navy); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--action); text-decoration: none; }
.more svg { width: 20px; height: 20px; transition: transform .2s ease; }
.more:hover svg { transform: translateX(4px); }

/* ── 동그라미 바로가기 ── */
.circles { display: flex; gap: 28px; }
.circle { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; min-width: 72px; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0; cursor: pointer; }
.circle__o { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; transition: transform .25s ease; }
.circle__o svg { width: 30px; height: 30px; }
.circle__t { font-size: var(--t-small); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.circle:hover .circle__o { transform: translateY(-3px); }
.circle:active .circle__o { transform: scale(.94); }
.circle--kakao .circle__o { background: var(--sun); color: var(--navy); }
.circle--tel .circle__o { background: var(--action); color: #fff; }
.circle--place .circle__o { background: var(--navy); color: #fff; }
.circle--book .circle__o { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.on-navy .circle__t { color: #fff; }
.on-navy .circle--place .circle__o { background: var(--navy-2); box-shadow: inset 0 0 0 2px #fff; }
@media (max-width: 760px) {
  .circles { gap: 12px; justify-content: space-between; }
  .circle { min-width: 64px; }
  .circle__o { width: 60px; height: 60px; }
  .circle__o svg { width: 26px; height: 26px; }
}

/* ── 하단 고정 ── */
.hs-dock { position: fixed; z-index: 40; right: 24px; bottom: 24px; background: #fff; border-radius: 999px; box-shadow: var(--float); padding: 10px 16px; transform: translateY(160%); transition: transform .3s ease; }
.hs-dock.is-show { transform: none; }
.hs-dock.is-show.is-off { transform: translateY(160%); }
.hs-dock .circles { gap: 12px; }
.hs-dock .circle { min-width: 60px; gap: 4px; }
.hs-dock .circle__o { width: 48px; height: 48px; }
.hs-dock .circle__o svg { width: 22px; height: 22px; }
.hs-dock .circle__t { font-size: 13px; }
@media (max-width: 760px) {
  .hs-dock { left: 0; right: 0; bottom: 0; border-radius: 0; padding: 8px 18px calc(8px + env(safe-area-inset-bottom)); }
  .hs-dock .circles { justify-content: space-between; }
}

/* ── 섹션 머리 ── */
.sec { padding: var(--sec) 0; background: #fff; }
.sec--sky { background: var(--sky); }
.sec--navy { background: #12385a; color: var(--on-navy); transition: background-color .6s ease; }
.sec--navy.is-lit { background: var(--navy); }
.sec--navy h2, .sec--navy h3 { color: #fff; }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 32px; }
.head p { max-width: 34em; }
.sec--navy .head p { color: #cfdbe6; }
@media (max-width: 1023px) { .head { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; } .head p { font-size: 15px; line-height: 1.55; } }

/* ── 사진 ── */
.ph { overflow: hidden; border-radius: var(--r); background: var(--mist); position: relative; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ph:hover img { transform: scale(1.03); }
.sec--navy .ph { background: var(--navy-2); }

/* 사진판 — 사진 위에 이름표 (서비스 하위 쪽 공통 반복 틀) */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 360px; gap: 10px; }
.pt { position: relative; overflow: hidden; border-radius: var(--r); background: var(--navy-2); }
.pt__ph { position: absolute; inset: 0; display: flex; gap: 6px; }
.pt__ph img { flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pt:hover .pt__ph img { transform: scale(1.03); }
.pt__plate { position: absolute; left: 14px; bottom: 14px; max-width: min(440px, calc(100% - 28px)); padding: 16px 20px 16px; border-radius: 16px; background: rgba(11, 42, 68, .9); color: #dbe6ef; font-size: 15px; line-height: 1.5; }
.pt__plate h3 { color: #fff; font-size: 24px; margin-bottom: 4px; }
.pt--light .pt__plate { background: rgba(255, 255, 255, .94); color: var(--ink-2); }
.pt--light .pt__plate h3 { color: var(--ink); }
.w3 { grid-column: span 3; } .w4 { grid-column: span 4; } .w5 { grid-column: span 5; } .w6 { grid-column: span 6; }
.w7 { grid-column: span 7; } .w8 { grid-column: span 8; } .w12 { grid-column: span 12; }
.h2r { grid-row: span 2; }
@media (max-width: 1023px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; gap: 8px; }
  .mosaic > * { grid-column: span 2; }
  .mosaic > .m-half { grid-column: span 1; }
  .h2r { grid-row: span 1; }
  .pt__plate { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 12px 14px; font-size: 14px; }
  .pt__plate h3 { font-size: 19px; }
}

/* 기종 가격 줄 */
.kinds { display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border-radius: var(--r); box-shadow: var(--float); padding: 28px 8px; position: relative; z-index: 2; }
.kinds li { padding: 4px 22px; display: grid; gap: 4px; align-content: start; }
.kinds li + li { border-left: 2px solid var(--sky); }
.kinds svg { width: 36px; height: 36px; color: var(--water); }
.kinds b { font-size: 16px; }
.kinds .kp { font-family: var(--head); font-weight: var(--hw); font-size: 28px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kinds small { font-size: 13px; color: var(--ink-2); }
.kinds-note { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.kinds--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .kinds { grid-template-columns: repeat(3, 1fr); padding: 4px 0; }
  .kinds li { padding: 10px 10px; gap: 2px; }
  .kinds li + li { border-left: 0; }
  .kinds li:not(:nth-child(3n+1)) { border-left: 2px solid var(--sky); }
  .kinds li:nth-child(n+4) { border-top: 2px solid var(--sky); }
  .kinds svg { width: 24px; height: 24px; }
  .kinds b { font-size: 13px; line-height: 1.3; }
  .kinds .kp { font-size: 18px; }
  .kinds small { font-size: 12px; line-height: 1.3; }
  .kinds-note { font-size: 13px; margin-top: 10px; }
}

/* 후기 판 — 인용과 사진을 섞은 격자 */
.qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-flow: dense; }
.qgrid > .ph, .qgrid > .edulink { grid-column: span 2; }
.q { margin: 0; padding: 28px 28px 24px; border-radius: var(--r); background: var(--mist); display: grid; align-content: space-between; gap: 18px; }
.q p { font-size: 17px; line-height: 1.62; }
.q cite { font-style: normal; font-size: var(--t-small); color: var(--ink-2); font-weight: 600; }
.q cite b { color: var(--action); margin-right: 8px; font-size: 16px; }
.sec--navy .q { background: var(--navy-2); }
.sec--navy .q p { color: #fff; }
.sec--navy .q cite { color: var(--on-navy-2); }
.sec--navy .q cite b { color: var(--sun); }
.qgrid .ph { min-height: 230px; }
@media (max-width: 1023px) {
  .qgrid .ph { aspect-ratio: 16 / 11.5 !important; }
  .q.is-long:not(.is-open) p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .q__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-top: 4px; border: 0; border-radius: 999px; background: rgba(0, 112, 173, .1); color: var(--action); font-weight: 700; font-size: 14px; cursor: pointer; justify-self: start; }
  .sec--navy .q__more { background: rgba(255, 255, 255, .1); color: #fff; }
}
@media (min-width: 1024px) { .q__more { display: none; } }
@media (max-width: 1023px) { .qgrid { grid-template-columns: 1fr; gap: 10px; } .qgrid > .ph, .qgrid > .edulink { grid-column: auto; } .q { padding: 20px 18px; } .q p { font-size: 16px; } .qgrid .ph { min-height: 0; aspect-ratio: 16 / 10; } }

/* 사진 한 장 + 후기 머리 · 인용 */
.qsplit { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.qsplit > .ph, .qsplit > .edulink { min-height: 440px; height: 100%; }
.qsplit__r { display: grid; gap: 12px; align-content: start; }
.qsplit .head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
@media (max-width: 1023px) { .qsplit { grid-template-columns: 1fr; gap: 10px; } .qsplit > .ph, .qsplit > .edulink { min-height: 0; height: auto; aspect-ratio: 16 / 10; } }

/* 가격표 */
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 11px 0; border-top: 1px solid #dde5eb; text-align: left; font-size: 16px; font-weight: 500; vertical-align: top; }
.ptable tbody tr:first-child th, .ptable tbody tr:first-child td, .ptable thead th, .ptable thead td { border-top: 0; }
.ptable thead td { font-size: 13px; color: var(--ink-2); text-align: right; padding: 0 0 2px; font-weight: 600; }
.ptable tbody td { text-align: right; font-family: var(--head); font-weight: var(--hw); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.ptable th small { display: block; font-size: 13px; color: var(--ink-2); }
.ptitle { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ptitle svg { width: 32px; height: 32px; color: var(--water); flex: none; }

/* 마무리 띠 */
.end { background: var(--navy); color: #fff; }
.end__in { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.end__txt { padding: 72px var(--gut) 72px 0; display: grid; align-content: center; gap: 28px; }
.end__txt p { color: #cfdbe6; margin-top: -14px; }
.end .ph { border-radius: 0; min-height: 380px; }
@media (max-width: 1023px) {
  .end__in { grid-template-columns: 1fr; }
  .end .ph { order: -1; min-height: 0; aspect-ratio: 16 / 9; margin: 0 calc(var(--gut) * -1); }
  .end__txt { padding: 36px 0 44px; gap: 22px; }
}

/* ── 바닥 ── */
.foot { background: #08223a; color: var(--on-navy); padding: 64px 0 120px; }
.foot__in { display: grid; grid-template-columns: 220px 1fr 1.3fr; gap: 40px 48px; align-items: start; }
.foot__logo { background: #fff; border-radius: 16px; padding: 12px 16px; width: 200px; }
.foot p { font-size: 15px; color: var(--on-navy-2); margin-bottom: 6px; }
.foot b { color: #fff; margin-right: 6px; }
.foot__big { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-family: var(--head); font-weight: var(--hw); font-size: clamp(26px, 2.4vw, 34px); color: #fff; letter-spacing: -.02em; text-decoration: none; }
.foot__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; }
.foot__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 15px; font-weight: 600; color: #dbe6ef; text-decoration: none; }
.foot__nav a:hover { background: rgba(255, 255, 255, .14); }
.foot__alt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--on-navy-2); }
.foot__alt a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #dbe6ef; font-weight: 600; text-decoration: none; }
.foot__alt a svg { width: 18px; height: 18px; }
@media (max-width: 1023px) {
  .foot { padding: 48px 0 128px; }
  .foot__in { grid-template-columns: 1fr; gap: 20px; }
  .foot__big { font-size: 28px; }
}

/* ── 판(모달) ── */
.hs-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.hs-sheet__back { position: absolute; inset: 0; background: rgba(11, 42, 68, .5); opacity: 0; transition: opacity .2s ease; }
.hs-sheet__box { position: relative; width: min(440px, 100%); max-height: calc(100svh - 32px); overflow: auto; background: #fff; border-radius: 20px; padding: 32px 26px 24px; box-shadow: var(--float); transform: translateY(16px); opacity: 0; transition: transform .22s ease, opacity .22s ease; outline: none; }
.hs-sheet.is-open .hs-sheet__back { opacity: 1; }
.hs-sheet.is-open .hs-sheet__box { transform: none; opacity: 1; }
.hs-sheet__x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.hs-sheet__title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; font-family: var(--body); }
.hs-sheet__text { font-size: 16px; color: var(--ink-2); margin-bottom: 16px; }
.hs-sheet__num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.hs-sheet .hs-btn { width: 100%; }
.hs-sheet__sub { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; font-weight: 600; color: var(--action); text-decoration: none; }

/* ── 기본 모션 ── */
.motion-ok [data-reveal] [data-r], .motion-ok [data-reveal].r-self { opacity: 0; transform: translateY(24px); transition: opacity .36s ease-out, transform .36s ease-out; }
.motion-ok [data-reveal].is-in [data-r], .motion-ok [data-reveal].r-self.is-in { opacity: 1; transform: none; }
body { transition: background-color .4s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .motion-ok [data-reveal] [data-r], .motion-ok [data-reveal].r-self { opacity: 1; transform: none; }
}

/* 휴대폰 — 글만 길게 이어지지 않게 사진 자리 조정 */
@media (max-width: 1023px) {
  .qsplit__r { display: contents; }
  .qsplit .head { order: 1; }
  .qsplit > .ph, .qsplit > .edulink { order: 2; }
  .qsplit .q { order: 3; }
  .mo-hide, [data-mo-hide] { display: none !important; }
}