/* ═══════════════════════════════════════════════════════════════
   복지용구 홈페이지 디자인 (2판)
   색 · 글꼴: 베이지 종이 · 코랄 · 진녹색 / Noto Sans KR + Noto Serif KR(숫자) + Nanum Pen Script(손글씨)
   고령 이용자 기준: 기본 글자 18px(PC 19px) · 「글자 크게」 22~23px · 단추 높이 56px 이상
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #efe8df; --paper: #fffdf8; --paper-2: #f7f1e8; --page: #fdf1ec;
  --coral: #d9553a; --coral-d: #b8432b; --coral-l: #fbeee9; --coral-m: #f6ddd5; --dash: #e9a898;
  --green: #1f3a33; --green-d: #172d28; --green-l: #e3ebe6; --green-m: #54726a;
  --ink: #1d1d1b; --sub: #5c5750; --mute: #8a837a; --line: #dfd4c5; --line-2: #ece3d7;
  --kakao: #fee500;
  --hand: 'Nanum Pen Script', cursive; --serif: 'Noto Serif KR', Georgia, serif;
  --r: 18px; --r-s: 10px;
  --fs: 18px; --wrap: 1180px;
}
@media (min-width: 900px) { :root { --fs: 19px; } }
html.big { --fs: 22px; }
@media (min-width: 900px) { html.big { --fs: 23px; } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; }
body { margin: 0; font-family: 'Noto Sans KR', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; color: var(--ink); background: var(--bg); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; overflow-x: clip; }
[hidden] { display: none !important; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { color: var(--coral-d); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .45em; font-weight: 900; letter-spacing: -.025em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.12rem; font-weight: 800; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
b, strong { font-weight: 800; }
em { font-style: normal; color: var(--coral); }
small { font-size: .84em; font-weight: 500; color: var(--sub); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 880px; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .5em 1em; z-index: 100; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.num { font-family: var(--serif); font-weight: 900; letter-spacing: -.01em; font-feature-settings: 'tnum'; }
.hand { font-family: var(--hand); color: var(--coral); font-size: 1.7rem; line-height: 1.15; display: inline-block; transform: rotate(-2deg); font-weight: 400; }

/* ── 아이콘 ── */
.ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: 0 0 auto; vertical-align: -.25em; }
.ico svg { width: 100%; height: 100%; }

/* ── 단추 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 56px; padding: .5em 1.25em; border-radius: 12px; font: inherit; font-weight: 800; font-size: 1.05rem; line-height: 1.2; border: 2px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 1.25em; height: 1.25em; }
.btn--tel { background: var(--coral); color: #fff; }
.btn--tel:hover { background: var(--coral-d); color: #fff; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-d); color: #fff; }
.btn--kakao { background: var(--kakao); color: #191919; }
.btn--kakao:hover { background: #f2da00; color: #191919; }
.btn--outline { background: var(--paper); color: var(--green); border-color: var(--green); }
.btn--outline:hover { background: var(--green-l); color: var(--green-d); }
.btn--white { background: var(--paper); color: var(--green-d); }
.btn--white:hover { background: #fff; color: var(--coral-d); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper); }
.btn--lg { min-height: 64px; font-size: 1.15rem; padding: .55em 1.5em; border-radius: 14px; }
.btn--sm { min-height: 48px; font-size: .95rem; padding: .35em .95em; border-radius: 10px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: default; }

/* ── 꼬리표 ── */
.tag { display: inline-block; font-size: .78rem; font-weight: 800; padding: .12em .6em; border-radius: 6px; line-height: 1.55; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; }
.tag--buy { background: var(--green-l); color: var(--green); }
.tag--rent { background: var(--coral-l); color: var(--coral-d); }
.tag--both { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.tag--line { background: transparent; border-color: var(--line); color: var(--sub); }

/* ── 맨 위 띠 · 머리 ── */
.topbar { background: var(--green); color: #e9efe9; font-size: .84rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; }
.topbar__in span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__font { background: none; border: 1px solid rgba(255, 255, 255, .45); color: #fff; border-radius: 6px; padding: .15em .7em; font-weight: 700; font-size: .84rem; min-height: 30px; white-space: nowrap; flex: 0 0 auto; }
.topbar__font[aria-pressed="true"] { background: #fff; color: var(--green); }
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; line-height: 1.2; }
.brand__name { font-weight: 900; font-size: 1.3rem; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__name::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--coral); margin-right: .32em; vertical-align: .12em; }
.brand__sub { font-size: .76rem; color: var(--sub); font-weight: 500; padding-left: 1.05rem; white-space: nowrap; }
.hdr__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hdr__call { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--ink); line-height: 1.15; padding-right: 6px; }
.hdr__call small { font-size: .72rem; color: var(--sub); }
.hdr__call b { font-family: var(--serif); font-size: 1.5rem; color: var(--coral); letter-spacing: 0; }
.hdr__menu { display: none; }
.gnb { border-top: 1px solid var(--line-2); }
.gnb__in { display: flex; gap: 2px; align-items: stretch; }
.gnb__a { display: inline-flex; align-items: center; gap: .35em; min-height: 52px; padding: 0 16px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.gnb__a:first-child { padding-left: 0; }
.gnb__a:hover, .gnb__a.is-on { color: var(--coral-d); border-bottom-color: var(--coral); }
.gnb__cart { margin-left: auto; background: none; border: 0; border-bottom: 3px solid transparent; }
.gnb__cart b { display: inline-flex; min-width: 1.6em; height: 1.6em; padding: 0 .35em; align-items: center; justify-content: center; border-radius: 999px; background: var(--coral); color: #fff; font-size: .8rem; font-family: var(--serif); }
.gnb__mobile { display: none; }
@media (max-width: 899px) {
  .hdr__in { min-height: 64px; }
  .brand__name { font-size: 1.12rem; }
  .brand__sub { display: none; }
  .hdr__call, .hdr__tools .btn--hide-m { display: none; }
  .hdr__menu { display: inline-flex; min-height: 50px; padding: 0 .9em; }
  .hdr__tel-m { display: inline-flex; min-height: 50px; padding: 0 .9em; }
  .hdr__tools { gap: 8px; }
  .gnb { display: none; }
  .gnb.is-open { display: block; }
  .gnb__in { flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 14px; }
  .gnb__a { min-height: 60px; font-size: 1.12rem; border-bottom: 1px solid var(--line-2); padding: 0; }
  .gnb__cart { margin-left: 0; text-align: left; }
  .gnb__mobile { display: grid; gap: 8px; padding-top: 14px; }
}
@media (min-width: 900px) { .hdr__tel-m { display: none; } }
/* 좁은 휴대폰: 상호가 잘리지 않게 머리의 전화 단추는 숨김 (아래 고정 단추에 「전화 주문」이 늘 있음) */
@media (max-width: 520px) { .hdr__tel-m { display: none; } .brand__name { font-size: 1.08rem; } .topbar__in span { font-size: .78rem; } }

/* ── 첫 화면 ── */
.hero { padding: 34px 0 30px; }
.hero__in { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .hero { padding: 54px 0 56px; } .hero__in { grid-template-columns: 1.02fr 1fr; gap: 48px; } }
.hero__hand { margin-bottom: .2em; }
.hero h1 { font-size: clamp(1.75rem, 3.5vw, 2.45rem); line-height: 1.25; margin-bottom: .5em; }
.hero h1 .num { color: var(--coral); font-size: 1.12em; }
.hero__lead { font-size: 1.1rem; color: var(--sub); max-width: 30em; }
.hero__lead b { color: var(--ink); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.3em 0 1em; }
.hero__btns .btn { flex: 1 1 190px; }
.hero__checks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92rem; color: var(--sub); font-weight: 500; }
.hero__checks li::before { content: '✓'; color: var(--coral); font-weight: 900; margin-right: .35em; }
.hero__visual { position: relative; padding-bottom: 46px; }
.hero__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 2.15; background: var(--paper-2); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__sticker { position: absolute; right: 6px; top: -22px; background: var(--paper); border: 1px dashed var(--dash); border-radius: 14px; padding: .25em .8em .1em; box-shadow: 0 6px 16px rgba(60, 40, 20, .08); }
.ticket { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgba(60, 40, 20, .12); }
.hero__ticket { position: absolute; left: -6px; bottom: 0; width: min(88%, 370px); padding: 16px 18px 14px; }
@media (min-width: 900px) { .hero__ticket { left: -34px; } }
.ticket__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; color: var(--sub); font-weight: 700; padding-bottom: 9px; border-bottom: 1px dashed var(--dash); margin-bottom: 9px; }
.ticket__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.ticket__row s { color: var(--mute); font-weight: 500; font-size: .92rem; }
.ticket__row b { color: var(--coral); font-size: 1.75rem; line-height: 1.1; }
.ticket__foot { font-size: .8rem; color: var(--sub); margin: 6px 0 0; }

/* ── 구역 머리 ── */
.sec { padding: 54px 0; }
.sec--paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec--tight { padding: 38px 0; }
.sh { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; border-top: 2px solid var(--ink); padding-top: 16px; margin-bottom: 26px; }
.sh__no { font-family: var(--serif); font-weight: 900; font-size: 1.05rem; color: var(--coral); line-height: 1.9; }
.sh__title { font-size: clamp(1.4rem, 3vw, 1.95rem); margin: 0 0 .2em; }
.sh__lead { color: var(--sub); margin: 0; max-width: 44em; }
.sh__more { grid-column: 2; justify-self: start; margin-top: 8px; font-weight: 800; white-space: nowrap; }
@media (min-width: 800px) { .sh { grid-template-columns: auto 1fr auto; } .sh__more { grid-column: 3; grid-row: 1; align-self: end; margin: 0 0 6px; } }
.h2 { display: flex; align-items: baseline; gap: .5em; margin-top: 1.8em; padding-bottom: .35em; border-bottom: 2px solid var(--ink); font-size: 1.3rem; }
.h2__more { margin-left: auto; font-size: .9rem; font-weight: 700; white-space: nowrap; }

/* ── 품목 타일 ── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .tiles--5 { grid-template-columns: repeat(5, 1fr); } }
.tile { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--coral); color: var(--ink); transform: translateY(-2px); }
.rows { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: .85em .2em; text-decoration: none; color: var(--ink); min-height: 56px; }
.row:hover { color: var(--coral-d); background: var(--paper-2); }
.row__name { font-weight: 800; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row__desc { grid-column: 1 / -1; color: var(--sub); font-size: .9rem; }
.row__price { grid-column: 2; grid-row: 1; font-size: .9rem; color: var(--sub); white-space: nowrap; }
.row__price b { font-family: var(--serif); color: var(--coral); font-size: 1.08rem; }
@media (min-width: 860px) { .row { grid-template-columns: 15em 1fr auto; } .row__desc { grid-column: 2; grid-row: 1; } .row__price { grid-column: 3; } }
.tile__img { aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--green-m); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; }
.tile__img .ico { width: 3.6rem; height: 3.6rem; }
.tile__body { padding: 11px 13px 13px; display: grid; gap: 2px; }
.tile__name { font-weight: 800; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tile__price { font-size: .9rem; color: var(--sub); }
.tile__price b { font-family: var(--serif); color: var(--coral); font-size: 1.08rem; }
.tile.is-hidden { display: none; }
.tile--all { align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 20px 12px; background: var(--green); border-color: var(--green); color: #fff; min-height: 150px; }
.tile--all:hover { color: #fff; background: var(--green-d); border-color: var(--green-d); }
.tile--all b { font-family: var(--serif); font-size: 2.1rem; line-height: 1.1; }
.tile--all span { font-weight: 800; }
.tile--all small { color: #cfdbd5; }

/* ── 상황별 ── */
.sits { display: grid; gap: 16px; }
@media (min-width: 800px) { .sits { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .sits { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.sit { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sit__img { background: var(--paper-2); aspect-ratio: 16 / 9; }
.sit__img img { width: 100%; height: 100%; object-fit: cover; }
.sit__body { padding: 18px 20px; }
.sit__body h3 { font-size: 1.2rem; }
.sit__body p { color: var(--sub); font-size: .95rem; margin-bottom: .8em; }
.sit__list { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--dash); }
.sit__list li { border-bottom: 1px dashed var(--dash); }
.sit__list a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 10px; padding: .6em 0; text-decoration: none; font-weight: 700; color: var(--ink); min-height: 48px; }
.sit__list a:hover { color: var(--coral-d); }
.sit__list span { font-size: .88rem; color: var(--sub); font-weight: 500; white-space: nowrap; }
.sit__list span b { font-family: var(--serif); color: var(--coral); font-size: 1.05rem; }

/* ── 상품 카드 ── */
.pgrid { display: grid; gap: 16px; }
@media (min-width: 560px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
.pc { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pc__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--paper-2); overflow: hidden; }
.pc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pc:hover .pc__img img { transform: scale(1.03); }
.pc__count { position: absolute; right: 8px; top: 8px; background: rgba(29, 29, 27, .78); color: #fff; font-size: .74rem; font-weight: 700; padding: .12em .6em; border-radius: 6px; }
.pc__body { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px 15px; flex: 1; }
.pc__kind { font-size: .82rem; color: var(--sub); font-weight: 700; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pc__name { font-size: 1.15rem; margin: 0; }
.pc__name a { color: var(--ink); text-decoration: none; }
.pc__name a:hover { color: var(--coral-d); }
.pc__spec { margin: 0; color: var(--sub); font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.price { margin-top: auto; padding-top: 9px; border-top: 1px dashed var(--dash); display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 8px; }
.price__label { font-size: .82rem; color: var(--sub); font-weight: 700; }
.price__mine { grid-column: 1; display: flex; align-items: baseline; gap: 2px; line-height: 1.2; }
.price__num { font-family: var(--serif); font-size: 1.65rem; color: var(--coral); font-weight: 900; }
.price__won { font-weight: 800; }
.price__per { font-size: .88rem; color: var(--sub); margin-left: .25em; }
.price__list { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-size: .82rem; color: var(--mute); line-height: 1.4; }
.price__list s { display: block; font-size: .92rem; }
.price--ask .price__num { font-size: 1.2rem; font-family: inherit; }
.pc__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.pc.is-hidden, .pgroup.is-hidden { display: none; }
.is-in .cart-add__label::after { content: ' ✓'; }
.cart-add.is-in { background: var(--green-l); border-color: var(--green); }

/* ── 가격표 ── */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ptable { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 620px; }
.ptable th, .ptable td { padding: .7em .9em; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.ptable thead th { background: var(--paper-2); font-size: .84rem; color: var(--sub); font-weight: 800; white-space: nowrap; border-bottom: 1px solid var(--line); }
.ptable tbody tr:last-child td { border-bottom: 0; }
.ptable td.r, .ptable th.r { text-align: right; white-space: nowrap; }
.ptable td .num { font-size: 1.08rem; }
.ptable td.mine .num { color: var(--coral); font-size: 1.2rem; }
.ptable a { font-weight: 800; text-decoration: none; color: var(--ink); }
.ptable a:hover { color: var(--coral-d); text-decoration: underline; }
.ptable small { display: block; }
.ptable .btn { min-height: 42px; font-size: .88rem; padding: 0 .8em; }
.table { width: 100%; border-collapse: collapse; margin-bottom: 1em; background: var(--paper); }
.table th, .table td { border: 1px solid var(--line); padding: .65em .85em; text-align: left; }
.table th { background: var(--paper-2); }

/* ── 본인부담률 ── */
.rate { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 22px; }
.rate__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.rate__head strong { font-size: 1.08rem; }
.rate__hint { color: var(--sub); font-size: .9rem; }
.rate__btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .rate__btns { grid-template-columns: repeat(4, 1fr); } }
.rate__btn { min-height: 54px; border-radius: 10px; border: 2px solid var(--line); background: var(--paper); font-weight: 800; font-size: 1rem; }
.rate__btn:hover { border-color: var(--green); }
.rate__btn[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.rate__note { margin: 10px 0 0; color: var(--sub); font-size: .92rem; }

/* ── 한도 예시 ── */
.limit { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .limit { grid-template-columns: 1fr 1fr; gap: 40px; } }
.limit__box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.limit__box h3 { font-size: 1.15rem; margin-bottom: .7em; }
.limit__rows { list-style: none; padding: 0; margin: 0; }
.limit__rows li { display: flex; justify-content: space-between; gap: 12px; padding: .5em 0; border-bottom: 1px dashed var(--dash); font-weight: 500; }
.limit__rows li span:last-child { white-space: nowrap; font-family: var(--serif); font-weight: 900; }
.limit__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: .7em; font-weight: 800; }
.limit__sum b { font-family: var(--serif); font-size: 1.5rem; color: var(--coral); }
.limit__bar { height: 14px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 14px 0 6px; }
.limit__bar i { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.limit__cap { display: flex; justify-content: space-between; font-size: .86rem; color: var(--sub); }
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; padding: .8em 0; border-bottom: 1px solid var(--line); }
.facts li:first-child { border-top: 1px solid var(--line); }
.facts b { font-family: var(--serif); font-size: 1.25rem; color: var(--green); line-height: 1.3; }
.facts span { color: var(--sub); }
.facts span strong { color: var(--ink); display: block; }

/* ── 주문 순서 ── */
.how { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .how { grid-template-columns: 1fr 1.05fr; gap: 48px; } }
.how__photo { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; position: relative; }
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.how__note { position: absolute; left: 14px; bottom: 12px; background: var(--paper); border-radius: 12px; padding: .15em .8em 0; border: 1px dashed var(--dash); }
.steps { list-style: none; padding: 0; margin: 0 0 22px; }
.steps li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li:first-child { border-top: 1px solid var(--line); }
.steps__no { font-family: var(--serif); font-weight: 900; font-size: 2.1rem; color: var(--coral); line-height: 1; }
.steps h3 { font-size: 1.18rem; margin-bottom: .25em; }
.steps p { margin: 0; color: var(--sub); }
.how__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 영상 장면 ── */
.clips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .clips { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.clip { margin: 0; }
.clip__stage { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.clip__stage img, .clip__stage video { width: 100%; height: 100%; object-fit: cover; }
.clip__play { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: .35em; background: rgba(29, 29, 27, .8); color: #fff; font-size: .8rem; font-weight: 700; padding: .25em .7em; border-radius: 999px; pointer-events: none; }
.clip__play::before { content: ''; border-left: .6em solid #fff; border-top: .38em solid transparent; border-bottom: .38em solid transparent; }
.clip.is-playing .clip__play { display: none; }
.clip figcaption { font-size: .9rem; font-weight: 700; padding: .5em .1em 0; line-height: 1.4; }
.clip figcaption a { color: var(--sub); font-weight: 500; text-decoration: none; display: block; font-size: .84rem; }

/* ── FAQ ── */
.faq { margin-bottom: 20px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 17px 46px 17px 2.1em; font-weight: 800; font-size: 1.05rem; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: 'Q'; position: absolute; left: 2px; top: 15px; font-family: var(--serif); font-weight: 900; color: var(--coral); font-size: 1.15rem; }
.faq__item summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--sub); line-height: 1; }
.faq__item[open] summary::after { content: '−'; }
.faq__a { padding: 0 8px 18px 2.1em; color: var(--sub); }
.faq__a p { margin: 0; }

/* ── 사업소 안내 ── */
.about { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.about__photo { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.info { list-style: none; padding: 0; margin: 0 0 18px; }
.info li { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: .7em 0; border-bottom: 1px solid var(--line); }
.info li:first-child { border-top: 2px solid var(--ink); }
.info b { color: var(--sub); font-weight: 700; font-size: .92rem; }
.about__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 주문 안내 띠 ── */
.cta { background: var(--green); color: #fff; padding: 46px 0; }
.cta__in { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .cta__in { grid-template-columns: 1.15fr 1fr; gap: 40px; } }
.cta .hand { color: #f3b9a8; }
.cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; }
.cta p { color: #d5dfda; margin-bottom: .4em; }
.cta__tel { font-family: var(--serif); font-weight: 900; font-size: 2rem; color: #fff; text-decoration: none; display: inline-block; margin-top: .2em; }
.cta__btns { display: grid; gap: 10px; }

/* ── 페이지 머리 ── */
.phead { padding: 26px 0 8px; }
.phead h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.phead__lead { font-size: 1.08rem; color: var(--sub); margin: 0; max-width: 40em; }
.phead__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--sub); }
.phead__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.phead--item .phead__in { display: grid; gap: 22px; align-items: center; }
@media (min-width: 860px) { .phead--item .phead__in { grid-template-columns: 1fr 44%; gap: 40px; } }
.phead__photo { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--green-m); }
.phead__photo img { width: 100%; height: 100%; object-fit: cover; }
.phead__photo .ico { width: 6rem; height: 6rem; }
.crumb { font-size: .86rem; color: var(--sub); margin-bottom: .7em; }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* ── 본문 ── */
.prose .lead { font-size: 1.12rem; }
.prose h2 { margin-top: 1.7em; font-size: 1.35rem; padding-top: .7em; border-top: 2px solid var(--ink); }
.prose--small { font-size: .95rem; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 1.5em; margin-bottom: .55em; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--coral); font-weight: 900; }
.cols3 { display: grid; gap: 16px; }
@media (min-width: 860px) { .cols3 { grid-template-columns: repeat(3, 1fr); } }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.box h2, .box h3 { font-size: 1.08rem; padding-bottom: .5em; margin-bottom: .7em; border-bottom: 1px dashed var(--dash); }
.box p:last-child { margin-bottom: 0; }
.ratetable { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-top: 10px; }
.ratetable h2 { font-size: 1.15rem; border: 0; padding: 0; margin-top: 0; }
.ratetable h2 small { display: block; margin-top: .2em; }
.ratetable table { width: 100%; border-collapse: collapse; margin-bottom: .8em; }
.ratetable th, .ratetable td { padding: .6em .4em; text-align: left; border-bottom: 1px dashed var(--dash); }
.ratetable th { font-size: .84rem; color: var(--sub); }
.ratetable td b { font-family: var(--serif); color: var(--coral); font-size: 1.2rem; }
.ratetable tr.is-on td { background: var(--coral-l); }
.ratetable__note { margin: 0; color: var(--sub); font-size: .9rem; }
.empty { background: var(--paper); border: 1px dashed var(--dash); border-radius: var(--r-s); padding: 16px; color: var(--sub); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pgroup { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.pgroup__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pgroup__head h2 { margin: 0; font-size: 1.4rem; }
.pgroup__head h2 a { color: inherit; text-decoration: none; }
.pgroup__head p { margin: 0; color: var(--sub); font-size: .92rem; flex: 1 1 280px; }
.pgroup__more { margin-left: auto; font-weight: 800; white-space: nowrap; }
.pgroup__sub { font-size: 1rem; margin: 22px 0 10px; color: var(--sub); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.jump a, .filter__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1em; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink); }
.jump a:hover { border-color: var(--coral); color: var(--coral-d); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter__btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── 상품 상세 ── */
.pd { display: grid; gap: 26px; padding-top: 8px; padding-bottom: 20px; }
.dgrid { display: grid; gap: 22px 18px; }
@media (min-width: 700px) { .dgrid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; } }
.dshot .clip__stage { border-radius: 14px; }
.dshot figcaption { font-size: 1.12rem; font-weight: 800; padding-top: .6em; display: flex; gap: .6em; align-items: baseline; }
.dshot__no { font-family: var(--serif); font-weight: 900; color: var(--coral); font-size: .95rem; }
@media (min-width: 900px) { .pd { grid-template-columns: 1.12fr 1fr; gap: 44px; align-items: start; } }
.gal__stage { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.gal__stage img, .gal__stage video { width: 100%; height: 100%; object-fit: cover; }
.gal__stage--icon { background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--green-m); }
.gal__stage--icon .ico { width: 7rem; height: 7rem; }
.gal__playbtn { position: absolute; right: 12px; bottom: 12px; min-height: 44px; border: 0; border-radius: 999px; background: rgba(29, 29, 27, .82); color: #fff; font-weight: 800; font-size: .9rem; padding: 0 1.1em; }
.gal__cap { margin: 10px 2px 0; font-weight: 700; }
.gal__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .gal__thumbs { grid-template-columns: repeat(6, 1fr); } }
.gal__thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 9; }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb[aria-pressed="true"] { border-color: var(--coral); }
.pd__kind { font-size: .9rem; color: var(--sub); font-weight: 700; margin: 0 0 .4em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd h1 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); margin-bottom: .25em; }
.pd__note { color: var(--sub); margin-bottom: 1em; }
.pd__price { padding: 16px 18px 14px; margin-bottom: 14px; box-shadow: none; }
.pd__price .ticket__row b { font-size: 2.15rem; }
.pd__rates { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .92rem; }
.pd__rates td { padding: .42em 0; border-top: 1px dashed var(--dash); }
.pd__rates td:last-child { text-align: right; font-family: var(--serif); font-weight: 900; }
.pd__rates tr.is-on td { color: var(--coral-d); font-weight: 800; }
.pd__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.pd__acts .btn--tel { grid-column: 1 / -1; }
.pd__meta { list-style: none; padding: 0; margin: 14px 0 0; font-size: .93rem; }
.pd__meta li { display: grid; grid-template-columns: 5.4em 1fr; gap: 10px; padding: .55em 0; border-bottom: 1px solid var(--line); }
.pd__meta li:first-child { border-top: 1px solid var(--line); }
.pd__meta b { color: var(--sub); font-weight: 700; }
.dblocks { display: grid; gap: 34px; }
.dblock { display: grid; gap: 14px; align-items: center; }
@media (min-width: 860px) { .dblock { grid-template-columns: 1.25fr 1fr; gap: 36px; } .dblock:nth-child(even) .dblock__media { order: 2; } }
.dblock__no { font-family: var(--serif); font-weight: 900; color: var(--coral); font-size: 1rem; display: block; margin-bottom: .3em; }
.dblock h3 { font-size: 1.4rem; margin-bottom: .4em; }
.dblock p { color: var(--sub); margin: 0; }
.spec { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.spec th, .spec td { padding: .8em 1em; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.spec th { width: 7.5em; background: var(--paper-2); color: var(--sub); font-size: .92rem; white-space: nowrap; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ── 주문서 ── */
.oform { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; }
.oform__group { margin-bottom: 24px; }
.oform__label { display: block; font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.oform__label small { font-weight: 500; }
.req { display: inline-block; font-size: .76rem; color: var(--coral-d); background: var(--coral-l); padding: .05em .5em; border-radius: 6px; margin-left: .3em; vertical-align: middle; }
.oform__input { width: 100%; min-height: 60px; font: inherit; font-size: 1.1rem; padding: .5em .9em; border: 2px solid var(--line); border-radius: var(--r-s); background: #fff; color: var(--ink); }
.oform__input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-l); }
.oform__input.is-bad { border-color: var(--coral); }
textarea.oform__input { min-height: 120px; resize: vertical; }
.oform__help { color: var(--sub); font-size: .92rem; margin: 6px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .chips--grid { grid-template-columns: repeat(3, 1fr); } }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: .4em .9em; border: 2px solid var(--line); border-radius: 10px; font-weight: 700; background: #fff; cursor: pointer; text-align: center; }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.agree { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.agree input { width: 26px; height: 26px; margin: .15em 0 0; flex: 0 0 auto; accent-color: var(--green); }
.oform__err { background: var(--coral-l); color: var(--coral-d); border: 1px solid var(--dash); border-radius: var(--r-s); padding: 12px 14px; font-weight: 700; }
.odone, .ofail { background: var(--paper); border: 2px solid var(--green); border-radius: var(--r); padding: 34px 22px; text-align: center; }
.ofail { border-color: var(--coral); }
.odone__icon { display: inline-flex; width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; align-items: center; justify-content: center; margin-bottom: 12px; }
.odone__icon .ico { width: 44px; height: 44px; }
.odone__no { font-weight: 800; color: var(--sub); }
.odone__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }

/* ── 담은 상품 ── */
.cartbox { background: var(--paper); border: 1px dashed var(--dash); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; }
.cartbox h2 { font-size: 1.1rem; margin-bottom: .6em; }
.cartlist { list-style: none; padding: 0; margin: 0; }
.cartlist li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: .6em 0; border-bottom: 1px dashed var(--dash); align-items: center; }
.cartlist__name { font-weight: 700; }
.cartlist__name small { display: block; }
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.qty b { min-width: 1.8em; text-align: center; font-family: var(--serif); }
.cartsum { display: grid; gap: 4px; padding-top: 12px; font-size: .95rem; }
.cartsum div { display: flex; justify-content: space-between; gap: 10px; }
.cartsum .is-main { font-weight: 800; font-size: 1.05rem; }
.cartsum .is-main b { font-family: var(--serif); font-size: 1.4rem; color: var(--coral); }
.cartsum small { color: var(--sub); }
.cart-empty { color: var(--sub); margin: 0; }
.drawer { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: rgba(29, 29, 27, .45); }
.drawer__panel { width: min(440px, 100%); height: 100%; background: var(--bg); padding: 18px 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer__head h2 { margin: 0; font-size: 1.25rem; }
.drawer__close { min-height: 46px; padding: 0 1em; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-weight: 700; }
.drawer .cartbox { margin: 0; }
.drawer__acts { display: grid; gap: 8px; margin-top: auto; }
.fab { position: fixed; right: 20px; bottom: 22px; z-index: 55; display: none; align-items: center; gap: .5em; min-height: 58px; padding: 0 1.2em; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-weight: 800; box-shadow: 0 10px 26px rgba(29, 29, 27, .3); }
.fab b { display: inline-flex; min-width: 1.7em; height: 1.7em; align-items: center; justify-content: center; border-radius: 50%; background: var(--coral); font-family: var(--serif); }
@media (min-width: 900px) { .fab.is-on { display: inline-flex; } }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: #fff; padding: .7em 1.2em; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 22px rgba(0, 0, 0, .25); max-width: 92vw; text-align: center; }

/* ── 관리자 ── */
.admin__login { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.admin__login .oform__input { flex: 1 1 240px; min-height: 52px; }
.admin__list { display: grid; gap: 10px; }
.ocard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px 16px; display: grid; gap: 6px; font-size: .95rem; }
.ocard__top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ocard__items { color: var(--green); font-weight: 700; }
.ocard__msg { white-space: pre-wrap; color: var(--sub); }
.ocard__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ocard__acts .btn { min-height: 40px; font-size: .9rem; padding: 0 .9em; }
.ocard--done { opacity: .6; }
.status { display: inline-block; padding: .1em .6em; border-radius: 6px; font-weight: 800; font-size: .85rem; background: var(--coral-l); color: var(--coral-d); }
.status--done { background: var(--green-l); color: var(--green); }
.status--call { background: var(--paper-2); color: var(--ink); }

/* ── 바닥 ── */
.ftr { background: var(--green-d); color: #c9d5cf; padding: 40px 0 104px; font-size: .92rem; }
.ftr a { color: #fff; }
.ftr__grid { display: grid; gap: 22px; margin-bottom: 20px; }
@media (min-width: 800px) { .ftr__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.ftr__name { color: #fff; font-weight: 900; font-size: 1.1rem; margin-bottom: .5em; }
.ftr__tel { font-family: var(--serif); font-weight: 900; font-size: 1.6rem; color: #fff; text-decoration: none; }
.ftr p { margin-bottom: .35em; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: .35em; }
.ftr__biz { font-size: .82rem; color: #a3b3ac; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 14px; }
.ftr__copy { font-size: .8rem; color: #8ea097; margin: 0; }
@media (min-width: 900px) { .ftr { padding-bottom: 40px; } }

/* ── 아래 고정 단추 (휴대폰) ── */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--paper); border-top: 1px solid var(--line); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(60, 40, 20, .1); }
.sticky__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 60px; border-radius: 12px; border: 0; text-decoration: none; font-weight: 800; font-size: .92rem; }
.sticky__a .ico { width: 1.45em; height: 1.45em; }
.sticky__a--tel { background: var(--coral); color: #fff; }
.sticky__a--kakao { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); }
.sticky__a--order { background: var(--green); color: #fff; }
.sticky__a b { font-family: var(--serif); }
@media (min-width: 900px) { .sticky { display: none; } }
.is-admin .sticky, .is-admin .fab { display: none; }

@media print { .topbar, .hdr, .sticky, .cta, .ftr, .fab { display: none !important; } body { background: #fff; } }