@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/pretendard-subset.woff2') format('woff2-variations');
}

/* ─────────────────────────────────────────────────────────────
   바름공방 — WebMade 견본
   실제로 있는 공방이 아닙니다. 만들면 이렇게 나온다는 것을 보이려고
   지은 가상의 공방입니다.

   앞의 견본 넷과 일부러 다르게 잡았습니다. 학원은 성적을 파니 또렷하게,
   병원은 안심을 파니 차분하게 잡았습니다. 공방은 손으로 만드는 시간을
   파는 곳이라 색을 흙과 유약 쪽에서 가져오고 모서리를 둥글게 뒀습니다.

   그리고 공방 손님이 진짜 궁금해하는 것 - 얼마인지, 언제 자리가 있는지,
   만든 걸 언제 받는지 - 이 셋을 첫 화면에서 다 보이게 짰습니다.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper:  #FBF8F4;
  --card:   #FFFFFF;
  --clay:   #F3EAE2;
  --ink:    #241C21;
  --muted:  #6E6068;
  --rule:   #E7DBD3;
  --brand:  #6B3352;
  --deep:   #2A1F26;
  --ok:     #3F7A5E;
  --wait:   #A2662A;

  --ui: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
        'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;

  --edge: clamp(20px, 5vw, 32px);
  --wrap: 1200px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.75;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.034em; line-height: 1.3; font-weight: 800; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--edge); }
.num  { font-variant-numeric: tabular-nums; }

/* ── 견본 알림 ────────────────────────────────────────────── */
.demo {
  background: var(--deep); color: #EDE3EA;
  font-size: 13px; line-height: 1.6; padding: 9px 0;
}
.demo .wrap { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.demo b { color: #fff; }
.demo a { color: #E4B9D2; font-weight: 700; white-space: nowrap; }

/* ── 머리 ─────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding-block: 12px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { width: 34px; height: 34px; flex: none; }
/* 로고 글줄 — 상호와 아랫줄이 벌어지지 않게 (온재독서실 기준) */
.logo > span { display: grid; line-height: 1.2; }
.logo b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.logo i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.menu { display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--muted);
}
.menu a:hover { background: var(--clay); color: var(--ink); }
.menu a[aria-current] { background: var(--brand); color: #fff; }

/* ── 공통 ─────────────────────────────────────────────────── */
main section { padding-block: clamp(40px, 7vw, 66px); }
main section + section { border-top: 1px solid var(--rule); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--brand); text-transform: uppercase; margin-bottom: 8px;
}
h2 { font-size: clamp(23px, 3.4vw, 30px); }
h3 { font-size: 17px; }
.lede { margin-top: 12px; color: var(--muted); font-size: 16.5px; max-width: 60ch; }
.lede b { color: var(--ink); font-weight: 700; }
.note { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* 문의·신청 — 폼 옆이 비지 않게 알아두실 것을 답니다 */
.askgrid {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px); align-items: start; margin-top: 24px;
}
.askgrid > form { max-width: none !important; margin-top: 0 !important; }
@media (max-width: 860px) { .askgrid { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 999px; text-decoration: none;
  font-size: 15px; font-weight: 700; border: 1.5px solid var(--rule);
  background: var(--card); white-space: nowrap;
}
.btn.fill { background: var(--brand); color: #fff; border-color: var(--brand); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.pill-tag {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--clay); color: var(--brand);
  font-size: 13px; font-weight: 700;
}

/* ── 첫 화면 ──────────────────────────────────────────────── */
.hero { padding-block: clamp(34px, 6vw, 58px) clamp(40px, 7vw, 66px); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(28px, 4vw, 52px); align-items: center;
}
.hero h1 { font-size: clamp(30px, 4.6vw, 46px); margin-top: 16px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede { margin-top: 16px; font-size: 17px; }

.stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; }
.stats .v { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.stats .k { display: block; font-size: 13px; color: var(--muted); }

/* ── 달력 (첫 화면 오른쪽) ────────────────────────────────── */
/* 일정·자리 — 달력 옆이 비지 않게 요약을 답니다 */
.sched {
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px); align-items: start; margin-top: 24px;
}
.sched > .cal { max-width: none; margin-top: 0; }
@media (max-width: 860px) { .sched { grid-template-columns: 1fr; } }

.sidecard {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 20px; padding: 20px 22px; box-shadow: 0 12px 30px rgba(60,35,50,.06);
}
.sidecard h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; }
.sidecard dl {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 14.5px;
}
.sidecard dt { color: var(--muted); font-weight: 600; white-space: nowrap; margin: 0; }
.sidecard dd { margin: 0; }
.sidecard dd b { font-weight: 700; }
.sidecard .p {
  margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--muted); line-height: 1.75;
}
.sidecard .btns { margin-top: 16px; }

.cal {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 20px; padding: 20px; box-shadow: 0 12px 30px rgba(60,35,50,.06);
}
.cal-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.cal-top b { font-size: 16px; }
.cal-top span { font-size: 13px; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow {
  text-align: center; font-size: 11.5px; font-weight: 700;
  color: var(--muted); padding-bottom: 4px;
}
.cal-grid .d {
  aspect-ratio: 1; border-radius: 10px; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 13px; background: transparent; color: var(--muted);
}
.cal-grid .d.has { background: var(--clay); color: var(--ink); font-weight: 700; }
.cal-grid .d.full { background: transparent; color: #B9AEB4; text-decoration: line-through; }
.cal-grid .d.pick { background: var(--brand); color: #fff; font-weight: 800; }
.cal-grid .d i { font-style: normal; font-size: 9.5px; line-height: 1; }
.cal-grid .d.has i { color: var(--ok); font-weight: 700; }
.cal-grid .d.pick i { color: #F0D7E5; }
.cal-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--muted);
}
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.cal-legend i { width: 11px; height: 11px; border-radius: 3px; display: block;
                border: 1px solid var(--rule); }
.cal-next {
  margin-top: 14px; background: var(--clay); border-radius: 13px;
  padding: 13px 15px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.cal-next b { font-size: 14.5px; }
.cal-next span { font-size: 13px; color: var(--muted); display: block; }
.cal-next em { font-style: normal; font-weight: 800; color: var(--brand); font-size: 15px; }

/* ── 클래스 카드 ──────────────────────────────────────────── */
.klasses { display: grid; gap: 16px; margin-top: 26px;
           grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.klass {
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  padding: 20px; display: flex; flex-direction: column; gap: 7px;
}
.klass .kt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.klass .nm { font-size: 17px; font-weight: 800; }
.klass .pill {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok);
  white-space: nowrap;
}
.klass .pill.wait { background: color-mix(in srgb, var(--wait) 14%, transparent); color: var(--wait); }
.klass .who { font-size: 13.5px; color: var(--muted); }
.klass .when { font-size: 14px; }
.klass .fee { margin-top: 6px; font-size: 15px; }
.klass .fee b { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.klass .inc { font-size: 12.5px; color: var(--muted); }

/* ── 만드는 것 ────────────────────────────────────────────── */
.pieces { display: grid; gap: 16px; margin-top: 26px;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.piece {
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  padding: 20px; text-align: center;
}
.piece .art { height: 120px; display: grid; place-items: center; margin-bottom: 12px; }
.piece .art svg { width: 108px; height: 108px; }
.piece b { display: block; font-size: 16px; }
.piece span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.piece .lv { display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 700;
             padding: 3px 10px; border-radius: 999px; background: var(--clay); color: var(--brand); }

/* ── 완성까지 단계 ────────────────────────────────────────── */
.steps { display: grid; gap: 14px; margin-top: 26px;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 16px; padding: 18px 18px 20px; position: relative;
}
.step .n {
  display: inline-grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 13px; font-weight: 800; margin-bottom: 9px;
}
.step b { display: block; font-size: 15.5px; }
.step span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.step em { font-style: normal; display: block; margin-top: 7px;
           font-size: 12.5px; font-weight: 700; color: var(--wait); }

/* ── 표 ───────────────────────────────────────────────────── */
.tw { overflow-x: auto; margin-top: 22px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
caption { text-align: left; font-size: 13.5px; color: var(--muted); padding-bottom: 9px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
thead th { background: var(--clay); font-size: 13.5px; white-space: nowrap; }
tbody th { font-weight: 700; }
td.r, th.r { text-align: right; white-space: nowrap; }

/* ── 목록 ─────────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; margin: 22px 0 0;
         display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ticks li { display: flex; gap: 11px; background: var(--card);
            border: 1px solid var(--rule); border-radius: 14px; padding: 15px 17px; }
.ticks li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px;
  border-radius: 50%; background: var(--brand);
}
.ticks span { font-size: 15px; }
.ticks b { font-weight: 700; }

.qa { display: grid; gap: 12px; margin-top: 22px; }
.qa div { background: var(--card); border: 1px solid var(--rule);
          border-radius: 14px; padding: 17px 19px; }
.qa .q { font-size: 16px; font-weight: 800; }
.qa .a { font-size: 15px; color: var(--muted); margin-top: 5px; }
.qa .a b { color: var(--ink); }

/* ── 오시는 길 ────────────────────────────────────────────── */
.mapbox { background: var(--clay); border: 1px solid var(--rule);
          border-radius: 18px; padding: 22px; }
.route { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.route li { display: flex; gap: 12px; align-items: flex-start; }
.route .n { flex: none; width: 24px; height: 24px; border-radius: 50%;
            background: var(--brand); color: #fff; display: grid; place-items: center;
            font-size: 12px; font-weight: 800; }
.route span { font-size: 15px; }

.ask { background: var(--card); border: 1px solid var(--rule);
       border-radius: 18px; padding: 22px; }
.ask .row { display: grid; gap: 6px; margin-bottom: 14px; }
.ask label { font-size: 13.5px; font-weight: 700; }
.ask input, .ask select, .ask textarea {
  font-family: var(--ui); font-size: 15px; padding: 11px 13px;
  border: 1.5px solid var(--rule); border-radius: 11px;
  background: var(--paper); color: var(--ink); width: 100%;
}
/* 고르는 칸의 화살표 — 브라우저 기본 화살표는 오른쪽 끝에 딱 붙습니다. 직접 그려 안쪽 여백만큼 띄웁니다. */
.ask select { appearance: none; -webkit-appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236E6C66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.ask select::-ms-expand { display: none; }
.ask textarea { min-height: 92px; resize: vertical; }
.ask .hint { font-size: 12.5px; color: var(--muted); }

/* ── 다음 페이지 ──────────────────────────────────────────── */
.next-links { display: grid; gap: 12px; margin-top: 22px;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.next-links a { background: var(--card); border: 1px solid var(--rule);
                border-radius: 15px; padding: 17px 19px; text-decoration: none; }
.next-links b { display: block; font-size: 16px; }
.next-links span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* ── 바닥 ─────────────────────────────────────────────────── */
.bot { border-top: 1px solid var(--rule); padding-block: 34px 90px;
       font-size: 14px; color: var(--muted); }
.bot .cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bot b { color: var(--ink); }
.bot dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 12px 0 0; }
.bot dt { color: var(--muted); }
.bot dd { margin: 0; color: var(--ink); }
.bot .made a { color: var(--brand); font-weight: 700; }

/* ── 아래 띠 (모바일) ─────────────────────────────────────── */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 40; display: none;
  gap: 9px; padding: 10px var(--edge) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--rule);
}
.callbar .btn { flex: 1; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .callbar { display: flex; }
  /* 바가 화면 바닥에 붙어 있으니 그만큼 자리를 비워 둡니다.
     안 그러면 바닥글 마지막 줄이 바 밑에 영영 깔립니다.
     바가 없는 장(이용안내 같은)에는 빈자리를 만들지 않습니다. */
  body:has(.callbar) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .menu a { padding: 6px 10px; font-size: 13.5px; }
}

/* ── 유약 색 ──────────────────────────────────────────────── */
.glazes { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.glaze { text-align: center; }
.glaze i {
  display: block; width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--rule); margin-bottom: 8px;
}
.glaze b { display: block; font-size: 14px; font-weight: 700; }
.glaze span { display: block; font-size: 12.5px; color: var(--muted); }

/* webmade:photo-hero ─ 여기부터 (자동 생성, 손대지 마세요) */
/* 두 판이 이 블록을 같이 씁니다.
     v1  .hero        사진 위에 종이색이 번지고 글은 원래 색
     v2  .hero.dim    사진 전체를 살짝 어둡게 하고 글은 흰색            */

.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }

.heroshot { position: absolute; inset: 0; z-index: 0; }
.heroshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── v1 : 글 쪽만 종이색으로 덮습니다 ──────────────────────────
   경계선이 보이면 합성한 티가 납니다. 중간 구간을 넓게 잡아 번지게 뒀습니다.
   각 견본이 쓰는 종이색(--paper)을 그대로 써서 위아래 구역과 이어집니다. */
.hero:not(.dim) .heroshot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--paper, #FFF) 0%,
    var(--paper, #FFF) 30%,
    color-mix(in srgb, var(--paper, #FFF) 90%, transparent) 44%,
    color-mix(in srgb, var(--paper, #FFF) 62%, transparent) 57%,
    color-mix(in srgb, var(--paper, #FFF) 26%, transparent) 71%,
    transparent 86%);
}

/* 우측 칸은 비워 사진이 보이게 두고, 그 사업장이 자랑하는 숫자만 얹습니다 */
.photoside { min-height: clamp(290px, 32vw, 420px); display: flex; align-items: flex-end; }
.pchip {
  display: grid; gap: 1px; margin: 0; width: max-content; max-width: 100%;
  background: color-mix(in srgb, var(--card, #FFF) 92%, transparent);
  border: 1px solid var(--rule, rgba(0,0,0,.1)); border-radius: 13px;
  padding: 12px 15px; backdrop-filter: blur(6px);
  box-shadow: 0 16px 34px -16px rgba(20,18,16,.4);
}
.pchip .ck { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted, #6B7069); }
.pchip .cv { font-size: 17px; font-weight: 800; letter-spacing: -.035em; color: var(--ink, #1B1B1B); }
.pchip .cn { font-size: 12px; color: var(--muted, #6B7069); }

/* ── v2 : 사진 전체를 살짝 어둡게, 글은 흰색 ───────────────────
   딤은 **글이 읽힐 만큼만** 넣습니다. 더 넣으면 사진이 안 보이고,
   그러면 사진을 깐 이유가 없어집니다. 고르게 깐 위에 글이 놓이는
   왼쪽만 조금 더 눌러 대비를 만듭니다. */
.hero.dim { min-height: min(82vh, 700px); display: grid; align-items: center; }
.hero.dim .heroshot::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(16,15,14,.80) 0%, rgba(16,15,14,.70) 30%,
                            rgba(16,15,14,.48) 52%, rgba(16,15,14,.31) 72%,
                            rgba(16,15,14,.25) 100%),
    linear-gradient(to top, rgba(16,15,14,.30) 0%, transparent 46%);
}

/* 사진은 어디가 밝을지 모릅니다. 딤만 믿으면 밝은 데서 글자가 날아가서
   글 자체에도 옅은 그림자를 답니다. 딤을 더 올리는 것보다 사진이 삽니다. */
.hero.dim { color: #FFF; }
.hero.dim h1, .hero.dim .lede, .hero.dim .rates, .hero.dim .stats, .hero.dim .hours-line {
  text-shadow: 0 1px 12px rgba(10,10,10,.55), 0 0 3px rgba(10,10,10,.35);
}
.hero.dim h1 { color: rgba(255,255,255,.92); }
.hero.dim h1 em { color: #FFF; }
.hero.dim .lede, .hero.dim .lede b { color: #FFF; }
.hero.dim .bar { background: #FFF; }

/* 배지 — 견본마다 이름이 다릅니다 */
.hero.dim .pill-tag, .hero.dim .seats-now, .hero.dim .open-now, .hero.dim .wait {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.34);
  color: #FFF; backdrop-filter: blur(6px);
}
.hero.dim .seats-now small, .hero.dim .open-now small,
.hero.dim .wait small { color: rgba(255,255,255,.72); }

/* 숫자 묶음 — 흰 상자로 두면 사진 위에 종이를 붙인 꼴이 됩니다. 선만 남깁니다 */
.hero.dim .rates, .hero.dim .stats, .hero.dim .hours-line {
  background: transparent; border-color: rgba(255,255,255,.3); color: #FFF;
}
.hero.dim .rate { background: transparent; border-color: rgba(255,255,255,.3); }
.hero.dim .rate.best { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.hero.dim .stats > * { background: transparent; border-color: rgba(255,255,255,.3); }
.hero.dim .k, .hero.dim .n { color: rgba(255,255,255,.8); }
.hero.dim .v { color: #FFF; }
/* 진료시간표의 요일 칸은 제 색(--muted)을 갖고 있어 어두운 배경에서 사라집니다 */
.hero.dim .hours-line dt { color: rgba(255,255,255,.8); }
.hero.dim .hours-line dd, .hero.dim .hours-line dd b { color: #FFF; }

/* 버튼 — 하나는 흰색으로 채우고 하나는 선만 */
.hero.dim .btn {
  background: transparent; border-color: rgba(255,255,255,.55); color: #FFF;
  backdrop-filter: blur(4px);
}
.hero.dim .btn:hover { border-color: #FFF; background: rgba(255,255,255,.12); }
.hero.dim .btn.fill { background: #FFF; border-color: #FFF; color: #17161A; }
.hero.dim .btn.fill:hover { background: rgba(255,255,255,.88); color: #17161A; }

.hero.dim .photoside { align-items: flex-end; justify-content: flex-end; }
.hero.dim .pchip {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34);
  backdrop-filter: blur(10px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
}
.hero.dim .pchip .ck, .hero.dim .pchip .cn { color: rgba(255,255,255,.76); }
.hero.dim .pchip .cv { color: #FFF; }

/* ── 로고·메뉴·햄버거를 사진 위에 얹습니다 ────────────────────
   헤더가 제 자리를 차지하면 사진은 그 아래에서 시작합니다. 헤더를
   투명하게 하고 첫 화면을 그 높이만큼 끌어올린 뒤, 같은 만큼 안쪽
   여백을 줘서 글이 헤더에 가리지 않게 합니다.
   높이는 견본마다 다릅니다. 스크립트가 재서 --topH 에 넣습니다. */
body.photohero header.top {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  transition: background .2s ease, border-color .2s ease;
}
body.photohero .hero {
  margin-top: calc(-1 * var(--topH, 62px));
  padding-top: calc(var(--topH, 62px) + clamp(22px, 4vw, 44px));
}
body.photohero .hero > .wrap { z-index: 2; }

/* 첫 화면을 지나면 헤더가 원래대로 돌아옵니다.
   안 그러면 흰 바탕 위에 흰 글씨가 남습니다. */
body.photohero.scrolled header.top {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(9px);
  border-bottom-color: var(--rule);
}
/* 휴대폰에서는 blur 를 켜면 안 됩니다 — 그 안의 메뉴 패널이 화면이
   아니라 헤더 기준으로 잡힙니다. 색만 채웁니다. */
@media (max-width: 900px) {
  body.photohero.scrolled header.top { backdrop-filter: none; background: var(--paper); }
}

/* v1 — 오른쪽 위는 사진이 그대로 드러납니다. 그 위에 메뉴가 놓이므로
   위쪽에만 종이색을 옅게 깔아 글자가 사진에 묻히지 않게 합니다. */
body.photohero:not(.dim) .hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1;
  height: calc(var(--topH, 62px) + 44px);
  background: linear-gradient(to bottom,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 70%, transparent) 54%,
    transparent 100%);
}

/* v2 — 어두운 사진 위라 로고와 메뉴를 흰색으로 바꿉니다.
   로고 그림은 색이 박혀 있어 통째로 하얗게 만듭니다. */
body.photohero.dim:not(.scrolled) header.top .logo,
body.photohero.dim:not(.scrolled) header.top .logo b { color: #FFF; }
body.photohero.dim:not(.scrolled) header.top .logo span,
body.photohero.dim:not(.scrolled) header.top .logo i { color: rgba(255,255,255,.78); }
/* 로고 그림은 색을 뒤집지 않습니다. 칠해진 로고를 뒤집으면 흰 덩어리가
   됩니다 — 필라테스에서 그렇게 됐습니다. 그림자만 넣어 띄웁니다. */
body.photohero.dim:not(.scrolled) header.top .logo svg {
  filter: drop-shadow(0 1px 7px rgba(0,0,0,.5));
}
body.photohero.dim:not(.scrolled) header.top nav.menu > a { color: rgba(255,255,255,.86); }
body.photohero.dim:not(.scrolled) header.top nav.menu > a:hover,
body.photohero.dim:not(.scrolled) header.top nav.menu > a[aria-current="page"] {
  background: rgba(255,255,255,.18); color: #FFF;
}
body.photohero.dim:not(.scrolled) header.top .me {
  color: #FFF; border-color: rgba(255,255,255,.4);
  background: rgba(16,15,14,.42); backdrop-filter: blur(8px);
}
body.photohero.dim:not(.scrolled) header.top .me em { color: rgba(255,255,255,.74); }
body.photohero.dim:not(.scrolled) .navtoggle { border-color: rgba(255,255,255,.55); }
body.photohero.dim:not(.scrolled) .navtoggle span { background: #FFF; }

/* 휴대폰에서는 좌우가 없습니다.
   v1 은 번지는 방향만 위→아래로 바꾸고, v2 는 고르게 깔면 됩니다. */
@media (max-width: 900px) {
  .hero:not(.dim) .heroshot::after {
    background: linear-gradient(to bottom,
      var(--paper, #FFF) 0%,
      var(--paper, #FFF) 46%,
      color-mix(in srgb, var(--paper, #FFF) 72%, transparent) 64%,
      color-mix(in srgb, var(--paper, #FFF) 28%, transparent) 82%,
      transparent 100%);
  }
  .photoside { min-height: 200px; }
  .hero.dim { min-height: min(86vh, 720px); }
  .hero.dim .heroshot::after {
    background: linear-gradient(to bottom, rgba(16,15,14,.44) 0%, rgba(16,15,14,.58) 100%);
  }
  .hero.dim .photoside { justify-content: flex-start; min-height: 120px; }

  /* 휴대폰 메뉴 패널은 종이색 바탕입니다. v2 의 "헤더 글씨는 흰색" 규칙이
     여기까지 따라오면 흰 바탕에 흰 글씨가 됩니다. 패널 안만 되돌립니다. */
  body.photohero.dim header.top nav.menu.navpanel > a,
  body.photohero.dim header.top .navpanel nav.menu > a { color: var(--muted); }
  body.photohero.dim header.top nav.menu.navpanel > a:hover,
  body.photohero.dim header.top .navpanel nav.menu > a:hover,
  body.photohero.dim header.top nav.menu.navpanel > a[aria-current="page"],
  body.photohero.dim header.top .navpanel nav.menu > a[aria-current="page"] {
    color: var(--ink); background: var(--sand);
  }
  body.photohero.dim header.top .navpanel .me {
    color: var(--ink); background: var(--card);
    border-color: var(--rule); backdrop-filter: none;
  }
  body.photohero.dim header.top .navpanel .me em { color: var(--muted); }
}
/* webmade:photo-hero ─ 여기까지 */

/* webmade:mobile-nav ─ 여기부터 (자동 생성, 손대지 마세요) */
/* 휴대폰 메뉴 — 우측 상단 햄버거, 오른쪽에서 밀려 나오는 패널.
   데스크톱에서는 아래 넷이 아예 안 보이고 지금 메뉴 그대로입니다. */
.navtoggle, .navveil, .navmore, .navlogo { display: none; }

@media (max-width: 900px) {
  /* backdrop-filter 가 걸린 요소는 그 안의 position:fixed 를 화면이 아니라
     자기 자신 기준으로 잡습니다. 그대로 두면 패널이 헤더 높이 안에서만
     움직입니다. 휴대폰에서만 끄고 배경색을 채웁니다. */
  header.top { backdrop-filter: none; background: var(--paper); }
  header.top .wrap { flex-wrap: nowrap; }

  .navtoggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-left: auto; flex: none;
    background: transparent; border: 1px solid var(--rule); border-radius: 11px;
    cursor: pointer; position: relative; z-index: 3;
  }
  .navtoggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .24s ease, opacity .18s ease;
  }
  /* 열리면 버튼을 감춥니다. 패널이 그 자리를 덮고 있어서, 남겨 두면
     닫기 버튼이 패널 안에 들어앉은 꼴이 됩니다.
     닫는 길은 셋입니다 — 옆 어두운 자리, 메뉴 하나 누르기, Esc. */
  body.navopen .navtoggle { visibility: hidden; }

  /* 오른쪽 끝에 붙여 두고 밖으로 밀어 놨다가, 열면 제자리로 들어옵니다.
     햄버거가 우측 상단이라 패널도 같은 쪽이어야 누른 자리에서 열립니다. */
  .navpanel {
    position: fixed; inset: 0 0 0 auto; z-index: 2;
    width: min(80vw, 326px); max-width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0;
    padding: env(safe-area-inset-top) 14px calc(20px + env(safe-area-inset-bottom));
    background: var(--paper); border-left: 1px solid var(--rule);
    transform: translateX(100%); transition: transform .28s ease;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* 그림자는 열렸을 때만 — 닫혀 밖에 숨어 있어도 그림자가 화면 안으로 번져 휴대폰 오른쪽 끝이 회색으로 보였습니다 (대표 지적, 2026-09-24) */
  body.navopen .navpanel { transform: translateX(0); box-shadow: -24px 0 60px -30px rgba(16,15,14,.55); }
  body.navopen { overflow: hidden; }
  /* 열렸을 때만 헤더를 맨 위로. 아래쪽 고정 막대(z-index 20~40)를 넘겨야 합니다 */
  body.navopen header.top { z-index: 80; }

  nav.menu.navpanel, .navpanel nav.menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
  }
  /* 패널 맨 위 로고 — 헤더에 있는 것을 생성기가 그대로 옮겨 온 것입니다.
     헤더 높이(--topH)만큼 잡아 두면 원래 로고가 있던 자리에 그대로 얹힙니다. */
  #site-nav .navlogo {
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 1; background: var(--paper);
    min-height: var(--topH, 62px);
    margin: 0 -14px 10px; padding: 0 26px;
    border-bottom: 1px solid var(--rule);
  }
  /* 사진 판은 헤더 글씨가 흰색입니다. 패널은 종이색이라 되돌려야 합니다.
     id 로 시작하는 이유 — 그 흰색 규칙이 클래스만으로는 못 이길 만큼 셉니다. */
  #site-nav .navlogo, #site-nav .navlogo b { color: var(--ink); }
  #site-nav .navlogo span, #site-nav .navlogo i { color: var(--muted); }
  #site-nav .navlogo svg { filter: none; }
  /* 열리면 헤더의 원래 로고는 감춥니다 — 같은 로고가 둘로 보입니다.
     자리는 남겨 둬야(visibility) 닫을 때 헤더가 폴짝 뛰지 않습니다. */
  body.navopen header.top > .wrap > .logo { visibility: hidden; }

  /* 메뉴 링크만. 바로 밑에 있는 a 만 고릅니다 — 그냥 `.navpanel a` 로 두면
     아래 안내 칸의 버튼까지 잡혀 버튼이 메뉴 글씨처럼 납작해집니다.
     id 로 시작하는 이유 — 견본마다 `nav.menu a` `.menu a` 로 제 나름의
     규칙이 있어서, 클래스로만 쓰면 견본에 따라 지고 이깁니다. 그러면
     어떤 견본은 손가락에 37px, 어떤 견본은 54px 이 됩니다. */
  #site-nav > a, #site-nav nav.menu > a {
    font-size: 16px; padding: 13px 12px; border-radius: 9px; white-space: normal;
  }

  /* ── 메뉴 아래 안내 칸 ────────────────────────────────────
     지금 상태 한 줄 · 바로 하는 것 · 전화 · 여는 시간 · 주소.
     선택자를 `.navpanel` 로 시작하는 이유 — 견본 본래 CSS 의
     `nav.menu a:hover` 같은 규칙이 더 세서, 그냥 두면 버튼 색을 덮습니다. */
  .navpanel .navmore {
    display: flex; flex-direction: column; flex: 1 1 auto;
    margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--rule);
  }
  .navpanel .navnow {
    display: flex; align-items: flex-start; gap: 9px; margin: 0 0 11px;
    padding: 11px 13px; border-radius: 11px; line-height: 1.45;
    background: color-mix(in srgb, var(--ok) 8%, var(--card));
    border: 1px solid color-mix(in srgb, var(--ok) 26%, var(--rule));
  }
  .navpanel .navnow .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
    flex: none; margin-top: 6px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 16%, transparent);
  }
  .navpanel .navnow b {
    display: block; font-size: 13.5px; color: var(--ok); word-break: keep-all;
  }
  .navpanel .navnow small {
    display: block; margin-top: 2px; font-size: 11.5px;
    font-weight: 500; color: var(--muted);
  }

  .navpanel .navmore .btn {
    display: flex; width: 100%; margin: 0 0 7px;
    font-size: 15px; padding: 13px 14px; border-radius: 10px; white-space: normal;
  }
  /* 채운 버튼 색 — 견본마다 대표색 이름이 달라서 없는 쪽으로 흘려보냅니다.
     `:hover` 까지 같이 적어야 본래 메뉴 hover 규칙에 덮이지 않습니다. */
  .navpanel .navmore .btn.fill,
  .navpanel .navmore .btn.fill:hover {
    color: #FFF;
    background: var(--brand, var(--navy, #333));
    border-color: var(--brand, var(--navy, #333));
  }
  .navpanel .navmore .btn:not(.fill),
  .navpanel .navmore .btn:not(.fill):hover {
    color: var(--ink); background: var(--card); border-color: var(--rule);
  }

  /* 여는 시간과 주소는 패널 바닥에 붙이고 한 칸으로 묶습니다.
     그냥 글줄로 두면 가운데가 빈 것이 사고처럼 보입니다 — 아래를 눌러 줍니다. */
  .navpanel .navfacts {
    margin: 16px 0 0; margin-top: auto;
    padding: 13px 14px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--rule);
    font-size: 13px; line-height: 1.5;
  }
  .navpanel .navfacts dt {
    margin: 0; font-size: 11.5px; font-weight: 700;
    letter-spacing: .04em; color: var(--muted);
  }
  .navpanel .navfacts dd {
    margin: 2px 0 10px; font-weight: 600; color: var(--ink);
    word-break: keep-all;      /* 한글은 그냥 두면 낱글자로 끊깁니다 */
  }
  /* 여는 시간은 " · " 자리에서만 줄을 바꿉니다. keep-all 로는 가운뎃점
     뒤에서 끊기는 것을 못 막아 "일요일 / ·공휴일 휴무" 가 됩니다. */
  #site-nav .navfacts dd span { white-space: nowrap; }
  .navpanel .navfacts dd:last-child { margin-bottom: 0; }

  /* 회원 칸(스튜디오)은 헤더에서는 좁아서 아랫줄을 숨기지만,
     패널은 자리가 넉넉하니 남은 횟수까지 보여 줍니다 */
  .navpanel .me em { display: block; }

  .navveil {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(16,15,14,.46);
    opacity: 0; pointer-events: none; transition: opacity .28s ease;
  }
  body.navopen .navveil { opacity: 1; pointer-events: auto; }
}

/* 움직임을 줄여달라고 설정한 분에게는 밀려 나오지 않고 그냥 나타납니다 */
@media (prefers-reduced-motion: reduce) {
  .navpanel, .navveil, .navtoggle span { transition: none; }
}
/* webmade:mobile-nav ─ 여기까지 */

/* PC 에서만 줄을 나눕니다. 휴대폰에서는 좁아서 한 번 더 접히면 문장이 토막 납니다.
   앞에 띄어쓰기를 하나 두고 쓰십시오 — PC 에서는 줄 끝 공백이라 안 보이고,
   휴대폰에서는 그 공백이 낱말 사이를 벌려 줍니다. */
@media (max-width: 760px) { br.pc { display: none; } }


/* ══ 사진 중심 구역 ═══════════════════════════════════════════
   제작사 포트폴리오 52건을 뜯어보고 반복되는 것만 가져왔습니다.
   **우리 견본에 이게 하나도 없어서 글만 많고 밋밋했습니다.**
     .quickbar     첫 화면 바로 아래 가로 바로가기
     .en           영문 소제목 (레퍼런스가 전부 이 꼴입니다)
     .pgrid        사진 격자
     .people-round 동그란 인물 사진
     .photoband    색면 위에 사진을 겹쳐 깐 구역
     .sidedock     오른쪽 세로 바로가기
   ══════════════════════════════════════════════════════════ */

/* ── 첫 화면 바로 아래 바로가기 ─────────────────────────────── */
.qb-sec { padding-block: 0; border-top: 0; }
.qb-sec > .wrap { padding-block: 0; }
.quickbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--card, #fff); border: 1px solid var(--rule, #e5e5e5);
  border-radius: var(--radius, 14px); overflow: hidden;
  margin-top: clamp(-46px, -4vw, -28px); position: relative; z-index: 3;
  box-shadow: 0 22px 48px -30px rgba(20,18,16,.45);
}
/* **퀵바는 첫 화면 위로 겹쳐 올라옵니다.** 사진은 겹쳐도 되지만 글과 버튼이
   깔리면 안 됩니다. 겹치는 값(-28~-46px)에 여유를 더해 첫 화면 아래를 비웁니다.
   `도구/간격확인.py` 가 이 틈을 매번 잽니다 — 눈으로 놓칩니다. */
.hero.has-qb > .wrap:last-of-type { padding-bottom: clamp(78px, 8.5vw, 102px); }
@media (max-width: 760px) {
  .hero.has-qb > .wrap:last-of-type { padding-bottom: clamp(56px, 10vw, 74px); }
}

.quickbar > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 20px 8px 18px; text-decoration: none;
  color: var(--ink, #1a1a18); font-size: 13.5px; font-weight: 700;
  text-align: center; word-break: keep-all; line-height: 1.4;
  transition: background .15s ease;
}
.quickbar > a + a { border-left: 1px solid var(--rule, #e5e5e5); }
.quickbar > a:hover { background: var(--surface, #f3f1ec); }
.quickbar .qi { display: block; color: var(--brand, #2a2a2a); }
.quickbar .qi svg { width: 27px; height: 27px; display: block; }
@media (max-width: 760px) {
  /* **여섯 칸을 한 줄에 밀어 넣으면 글자가 세로로 쪼개집니다.**
     두 줄로 접습니다. */
  .quickbar { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
              margin-top: clamp(-30px, -5vw, -18px); }
  .quickbar > a { padding: 15px 6px 13px; font-size: 12.5px; gap: 7px; }
  .quickbar > a + a { border-left: 0; }
  .quickbar > a:nth-child(n+4) { border-top: 1px solid var(--rule, #e5e5e5); }
  .quickbar > a:not(:nth-child(3n+1)) { border-left: 1px solid var(--rule, #e5e5e5); }
  .quickbar .qi svg { width: 23px; height: 23px; }
}

/* ── 영문 소제목 ───────────────────────────────────────────── */
.en {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent, #8a6a4a);
}
.photoband .en { color: rgba(255,255,255,.78); }

/* ── 사진 격자 ─────────────────────────────────────────────── */
.pgrid { display: grid; gap: clamp(10px, 1.4vw, 16px); }
.pgrid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pgrid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid figure { margin: 0; }
.pgrid img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius-sm, 10px);
}
.pgrid figcaption {
  margin-top: 9px; font-size: 13px; font-weight: 600;
  color: var(--muted, #6e6c66); word-break: keep-all;
}
@media (max-width: 860px) { .pgrid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pgrid.g3, .pgrid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid figcaption { font-size: 12.5px; }
}

/* ── 동그란 인물 사진 ──────────────────────────────────────── */
.people-round {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.people-round figure { margin: 0; text-align: center; }
.people-round .ph {
  display: block; width: min(100%, 190px); margin: 0 auto;
  aspect-ratio: 1; border-radius: 999px; overflow: hidden;
  background: var(--surface, #f3f1ec);
}
.people-round .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.people-round figcaption { margin-top: 14px; }
.people-round figcaption b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.people-round figcaption i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 13px; color: var(--muted, #6e6c66);
}

/* ── 색면 + 사진 겹침 ──────────────────────────────────────── */
.photoband { position: relative; overflow: hidden; background: var(--brand, #2a2a2a); border-top: 0; }
.photoband .bandshot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .34; z-index: 0;
}
/* 사진만 깔면 글이 밝은 데서 날아갑니다. 색을 한 겹 더 덮습니다. */
.photoband::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--brand, #2a2a2a) 88%, transparent) 0%,
    color-mix(in srgb, var(--brand, #2a2a2a) 62%, transparent) 58%,
    color-mix(in srgb, var(--brand, #2a2a2a) 40%, transparent) 100%);
}
.photoband > .wrap { position: relative; z-index: 2; color: #fff; }
.photoband h2 { color: #fff; }
.photoband .lede { color: rgba(255,255,255,.86); max-width: 40em; }
.photoband .bandstat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(12px, 1.8vw, 22px); margin-top: clamp(24px, 3.4vw, 36px);
}
.photoband .bandstat > div {
  padding: 16px 18px; border-radius: var(--radius-sm, 10px);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
}
.photoband .bandstat .v {
  display: block; font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 800; letter-spacing: -.035em; color: #fff;
}
.photoband .bandstat .k { display: block; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.78); }

/* ── 오른쪽 세로 바로가기 ──────────────────────────────────── */
.sidedock {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: grid; gap: 8px;
}
.sidedock a {
  display: grid; justify-items: center; gap: 4px; width: 56px; padding: 11px 4px;
  background: var(--card, #fff); border: 1px solid var(--rule, #e5e5e5);
  border-radius: 14px; text-decoration: none;
  color: var(--ink, #1a1a18); font-size: 11px; font-weight: 700;
  box-shadow: 0 14px 30px -20px rgba(20,18,16,.5);
  transition: background .15s ease, border-color .15s ease;
}
.sidedock a:hover { background: var(--surface, #f3f1ec); border-color: var(--brand, #2a2a2a); }
.sidedock svg { width: 21px; height: 21px; color: var(--brand, #2a2a2a); }
/* **휴대폰에서는 띄우지 않습니다.** 화면 아래 고정 띠가 같은 일을 하고,
   둘 다 띄우면 엄지로 닿는 자리를 둘이 다툽니다. */
@media (max-width: 900px) { .sidedock { display: none; } }
/* ══ 사진 중심 구역 · 끝 ══════════════════════════════════════ */

/* ══ 두 번째 레퍼런스에서 배운 것 ══════════════════════════════
   템플릿 여덟 벌은 문법이 또 달랐습니다. 정보를 빽빽이 채우는 대신
   **큰 글씨 하나와 흐르는 줄**로 분위기를 만듭니다.
   ══════════════════════════════════════════════════════════ */

/* ── 맨 위 공지 띠 ─────────────────────────────────────────── */
.topnote {
  background: var(--brand, #2a2a2a); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em;
}
.topnote > .wrap {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 38px; padding-block: 8px; text-align: center; word-break: keep-all;
}
.topnote a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 560px) { .topnote { font-size: 12px; } .topnote > .wrap { gap: 8px; } }

/* ── 옆으로 흐르는 글줄 ────────────────────────────────────── */
.marquee {
  overflow: hidden; border-block: 1px solid var(--rule, #e5e5e5);
  background: var(--surface, #f3f1ec); padding-block: 13px;
}
.mq-track {
  display: flex; gap: 0; width: max-content;
  animation: mq 34s linear infinite;
}
.mq-track span {
  padding: 0 26px; font-size: clamp(15px, 2.2vw, 19px); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink, #1a1a18); white-space: nowrap;
}
.mq-track span + span::before {
  content: "·"; margin-right: 26px; margin-left: -26px; color: var(--accent, #8a6a4a);
}
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 움직임을 줄여 달라고 설정한 분에게는 멈춰 보여드립니다. */
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ── 옆으로 미는 사진 줄 ───────────────────────────────────── */
.hstrip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.hstrip::-webkit-scrollbar { height: 6px; }
.hstrip::-webkit-scrollbar-thumb { background: var(--rule, #e5e5e5); border-radius: 99px; }
.hs-track { display: flex; gap: clamp(10px, 1.4vw, 16px); width: max-content; }
.hs-track figure { margin: 0; width: clamp(210px, 26vw, 310px); scroll-snap-align: start; }
.hs-track img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius-sm, 10px);
}
.hs-track figcaption { margin-top: 9px; font-size: 13px; font-weight: 600;
  color: var(--muted, #6e6c66); word-break: keep-all; }
/* ══ 두 번째 레퍼런스에서 배운 것 · 끝 ═════════════════════════ */

/* ══ 첫 화면 · 네 원형 ═══════════════════════════════════════
   레퍼런스에서 넷을 옮기고(center · left · title · gallery), 전 판이 더 나았던
   둘(dim · overlap)을 남겼습니다. class 는 `hero2` 로 새로 잡아 옛 `.hero` 규칙과
   섞이지 않게 했습니다. (표식 이름은 처음 이름 그대로 "네 원형" 입니다 — 바꾸면
   견본첫화면넣기.py 가 예전 블록을 못 찾습니다.)
   ══════════════════════════════════════════════════════════ */
/* 색 이름이 견본마다 다릅니다 (--brand 가 없고 --navy 만 있는 곳도 있습니다).
   여기서 한 번 받아 두고 아래서는 --h2b(바탕색) · --h2a(강조색)만 씁니다. */
:root { --h2b: var(--brand, var(--navy, var(--ink, #222)));
        --h2a: var(--accent, var(--brand, var(--navy, var(--ink, #222)))); }
.hero2 { position: relative; overflow: hidden; padding: 0; border-top: 0; margin: 0; }
.hero2 > .wrap { position: relative; z-index: 2; padding-block: 0; }
.hero2 h1 { margin: 0; color: inherit; }
.hero2 h1 em { font-style: normal; }
.hero2 .h2-sub { margin: 0; word-break: keep-all; }
.h2-shot { position: absolute; inset: 0; z-index: 0; }
.h2-shot img, .h2-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.h2-btns.center { justify-content: center; }
.hero2 .btn { font-size: 15px; }

/* 캐러셀 화살표와 점 — 레퍼런스가 전부 갖고 있습니다. 장식이라 눌러도 아무 일 없습니다. */
.h2-nav { position: absolute; inset: 50% 0 auto 0; z-index: 3; display: flex;
  justify-content: space-between; padding: 0 clamp(14px, 2vw, 30px); transform: translateY(-50%);
  pointer-events: none; }
.h2-arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.42); backdrop-filter: blur(4px); }
.h2-dots { position: absolute; left: 0; right: 0; bottom: clamp(70px, 8vw, 100px); z-index: 3;
  display: flex; justify-content: center; gap: 8px; }
.h2-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.42); }
.h2-dots i.on { width: 26px; border-radius: 99px; background: #fff; }
.h2-dots.inline { position: static; justify-content: flex-start; margin-top: clamp(22px, 3vw, 34px); }

/* 머리말을 사진 위에 띄웁니다 (center · left · gallery) */
body.photohero .hero2 { margin-top: calc(-1 * var(--topH, 62px)); }

/* ── center : 서울티스치과 ─────────────────────────────────── */
.h-center { min-height: min(100svh, 820px); display: grid; align-items: center; color: #fff;
  text-align: center; padding-block: calc(var(--topH, 62px) + clamp(40px, 6vw, 72px)) clamp(120px, 14vw, 170px); }
.h-center .h2-shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(12,16,20,.62) 0%, rgba(12,16,20,.44) 45%, rgba(12,16,20,.66) 100%); }
.h-center .h2-eyebrow { margin: 0 0 16px; font-size: 12.5px; font-weight: 700; letter-spacing: .26em;
  color: rgba(255,255,255,.86); }
.h-center h1 { font-size: clamp(30px, 5.4vw, 58px); font-weight: 800; line-height: 1.22;
  letter-spacing: -.035em; text-shadow: 0 2px 22px rgba(0,0,0,.35); word-break: keep-all; }
.h-center h1 em { color: #fff; border-bottom: 3px solid rgba(255,255,255,.55); }
.h-center .h2-sub { max-width: 42em; margin: 18px auto 0; font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.7; color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.h-center .h2-note { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.72); word-break: keep-all; }
.h-center .h2-btns { margin-top: 26px; }
.h-center .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); }
.h-center .btn.fill { background: #fff; border-color: #fff; color: var(--ink); }
.h-center .h2-pills { display: inline-flex; margin: 34px auto 0; padding: 6px;
  border-radius: 999px; background: rgba(8,12,16,.46); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); }
.h-center .h2-pills span { display: grid; gap: 1px; padding: 10px 26px; text-align: center; }
.h-center .h2-pills span + span { border-left: 1px solid rgba(255,255,255,.22); }
.h-center .h2-pills b { font-size: clamp(18px, 2vw, 22px); font-weight: 800; letter-spacing: -.03em; }
.h-center .h2-pills i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.72); }

/* ── left : 미래로마디재활 ─────────────────────────────────── */
.h-left { min-height: min(96svh, 780px); display: grid; align-items: center; color: #fff;
  padding-block: calc(var(--topH, 62px) + clamp(36px, 5vw, 60px)) clamp(110px, 12vw, 150px); }
.h-left .h2-shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--h2b) 84%, transparent) 0%,
    color-mix(in srgb, var(--h2b) 62%, transparent) 42%,
    color-mix(in srgb, var(--h2b) 22%, transparent) 78%,
    color-mix(in srgb, var(--h2b) 10%, transparent) 100%); }
.h-left > .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end;
  gap: clamp(24px, 4vw, 48px); }
.h-left .h2-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.84); }
.h-left .h2-eyebrow::before { content: ""; width: 34px; height: 1px; background: rgba(255,255,255,.7); }
.h-left h1 { font-size: clamp(32px, 5.2vw, 56px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; word-break: keep-all; }
.h-left h1 em { color: #fff; }
.h-left .h2-sub { max-width: 34em; margin-top: 18px; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: rgba(255,255,255,.88); }
.h-left .h2-btns { margin-top: 26px; }
.h-left .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.h-left .btn.fill { background: #fff; border-color: #fff; color: var(--h2b); }
.h-left .btn.tel { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-color: #fff;
  color: var(--h2b); border-radius: 999px; padding-inline: 20px; }
.h-left .btn.tel svg { width: 17px; height: 17px; }
.h2-card { justify-self: end; min-width: 220px; padding: 18px 22px; border-radius: 16px;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 24px 48px -24px rgba(0,0,0,.45); }
.h2-card .k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.h2-card b { display: block; margin-top: 4px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -.035em; color: var(--h2b); }
.h2-card .n { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); word-break: keep-all; }

/* ── title : 밀담 · 구운담 ─────────────────────────────────── */
.h-title { background: var(--paper); color: var(--ink); text-align: center;
  padding-block: clamp(44px, 6.5vw, 84px) 0; }
.h-title h1 { font-size: clamp(38px, 6.2vw, 74px); font-weight: 900; line-height: 1.08;
  letter-spacing: -.045em; word-break: keep-all; }
.h-title .h2-accent { margin: clamp(10px, 1.6vw, 18px) 0 0; font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 700; font-style: italic; letter-spacing: -.02em; color: var(--h2a);
  font-family: "Nanum Pen Script", "Gaegu", "KoPub Batang", "Apple SD Gothic Neo", cursive, var(--ui); }
.h-title .h2-sub { max-width: 40em; margin: 16px auto 0; font-size: clamp(14.5px, 1.4vw, 16.5px); color: var(--muted); line-height: 1.7; }
.h-title .h2-btns { margin-top: 22px; }
.h-title .h2-photo { position: relative; margin-top: clamp(30px, 4.4vw, 56px); border-radius: var(--radius, 14px) var(--radius, 14px) 0 0; overflow: hidden; }
.h-title .h2-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7.2; object-fit: cover; }
.h2-chip { position: absolute; left: clamp(14px, 2vw, 26px); top: clamp(14px, 2vw, 26px);
  padding: 8px 14px; border-radius: 999px; background: var(--h2b); color: var(--paper);
  font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.h2-badge { position: absolute; right: clamp(14px, 2vw, 26px); top: clamp(14px, 2vw, 26px);
  display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--ink);
  text-align: left; box-shadow: 0 16px 34px -18px rgba(0,0,0,.5); transform: rotate(3deg); }
.h2-badge b { font-size: 15px; font-weight: 900; color: var(--h2a); }
.h2-badge i { font-style: normal; font-size: 12px; color: var(--muted); }
.h2-hours { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; text-align: center;
  background: rgba(10,10,10,.56); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  backdrop-filter: blur(6px); }

/* ── gallery : 베리트디자인 · 글로이 ──────────────────────── */
.h-gallery { min-height: min(92svh, 760px); display: grid; align-items: end; color: #fff;
  padding-block: calc(var(--topH, 62px) + 40px) clamp(110px, 12vw, 150px); }
.h-gallery .h2-shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.62) 0%, rgba(10,10,10,.18) 46%, rgba(10,10,10,.22) 100%); }
.h-gallery:not(.quiet) { align-items: center; text-align: center; }
.h-gallery .h2-en { margin: 0 0 14px; font-family: Georgia, "Times New Roman", "Noto Serif KR", serif;
  font-size: clamp(38px, 6.4vw, 78px); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; }
.h-gallery h1 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.h-gallery.quiet h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.h-gallery .h2-sub { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); max-width: 36em; }
.h-gallery:not(.quiet) .h2-sub { margin-inline: auto; }
.h-gallery .h2-btns { margin-top: 20px; }
.h-gallery .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; border-radius: 999px; }
.h-gallery .btn.fill { background: #fff; border-color: #fff; color: var(--ink); }
.h-gallery .h2-dots { bottom: clamp(72px, 7.5vw, 96px); }
.h-gallery.quiet .h2-dots { justify-content: flex-start; padding-left: var(--edge, 24px); }

/* ── dim : 목요일의 부엌 — 전 판(photo-dim) 그대로 ─────────────────
   사진을 화면 전체에 깔고 어둡게 덮은 뒤 왼쪽에 흰 글을 얹습니다. */
.h-dim { min-height: min(80vh, 660px); display: flex; align-items: center; color: #FFF;
  padding-top: calc(var(--topH, 62px) + clamp(28px, 5vw, 56px)); padding-bottom: clamp(28px, 5vw, 56px); }
.h-dim .shot { position: absolute; inset: 0; z-index: 0; }
.h-dim .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-dim .shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,14,12,.82) 0%, rgba(14,14,12,.70) 32%,
    rgba(14,14,12,.44) 58%, rgba(14,14,12,.26) 100%),
    linear-gradient(to top, rgba(14,14,12,.34) 0%, transparent 46%); }
.h-dim > .wrap { width: 100%; }
.h-dim h1, .h-dim .lede, .h-dim .lede b, .h-dim .eyebrow { color: #FFF; }
.h-dim .lede { color: rgba(255,255,255,.86); }
.h-dim .eyebrow { border-left-color: rgba(255,255,255,.6); color: #FFF; }
.h-dim .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.44); color: #FFF;
  backdrop-filter: blur(6px); }
.h-dim .btn.fill { background: #FFF; border-color: #FFF; color: var(--ink); }
.h-dim .stats > div { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28);
  color: #FFF; backdrop-filter: blur(6px); box-shadow: none; }
.h-dim .stats .k { color: rgba(255,255,255,.75); }
.h-dim.has-qb > .wrap { padding-bottom: clamp(78px, 8.5vw, 102px); }

/* ── overlap : 라온헤어 — 전 판(overlap) 그대로 ───────────────────
   글이 위, 사진이 아래. 사진 위로 현황 카드가 걸쳐 올라옵니다. */
.h-overlap { background: var(--paper); color: var(--ink); padding-block: clamp(30px, 4.6vw, 54px) 0; }
.h-overlap > .wrap + .wrap { margin-top: clamp(26px, 3.8vw, 44px); }
.h-overlap .shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius, 14px); display: block; }
.h-overlap .over { position: relative; margin: clamp(-80px, -7vw, -46px) auto 0;
  width: min(100%, 860px); background: var(--card, #fff); border: var(--bd, 1px) solid var(--rule, #e5e5e5);
  border-radius: var(--radius, 14px); padding: clamp(22px, 3.2vw, 34px); box-shadow: var(--shadow, none); }
.h-overlap.has-qb > .wrap:last-of-type { padding-bottom: clamp(78px, 8.5vw, 102px); }

/* 퀵바가 첫 화면 위로 겹쳐 올라옵니다 (PC 최대 46px · 폰 최대 30px).
   사진 위에 글을 얹는 세 원형은 padding-bottom 을 위에서 넉넉히 잡았고,
   title 은 사진이 맨 밑이라 여기서 비웁니다 — 안 비우면 영업시간 띠가 퀵바에 깔립니다.
   `도구/간격확인.py` 가 맨 아랫줄 ↔ 퀵바 틈을 잽니다. */
.h-title.has-qb { padding-bottom: clamp(64px, 7vw, 92px); }
.h-title.has-qb .h2-photo { border-radius: var(--radius, 14px); }

/* 사진 위에 뜬 머리말 — 열두 곳 공통. 손수 만든 견본은 저마다 비슷한 규칙을
   갖고 있지만 생성 견본은 photo-dim 첫 화면에만 있었습니다. 여기 한 벌로 둡니다.
   스크롤하면(.scrolled) 규칙이 풀려 원래 머리말로 돌아갑니다. */
body.photohero:not(.scrolled) .top { background: transparent; border-bottom-color: transparent;
  box-shadow: none; backdrop-filter: none; }
body.photohero:not(.scrolled) .top > .wrap > .logo,
body.photohero:not(.scrolled) .top > .wrap > .logo b { color: #fff; }
body.photohero:not(.scrolled) .top > .wrap > .logo i,
body.photohero:not(.scrolled) .top > .wrap > .logo span:not(.mk) { color: rgba(255,255,255,.78); }
body.photohero:not(.scrolled) .top > .wrap > .logo .mk { background: #fff; color: var(--h2b); }
body.photohero:not(.scrolled) .top > .wrap > .logo svg { filter: drop-shadow(0 1px 7px rgba(0,0,0,.5)); }
@media (min-width: 901px) {
  body.photohero:not(.scrolled) .top .menu > a { color: rgba(255,255,255,.86); }
  body.photohero:not(.scrolled) .top .menu > a:hover,
  body.photohero:not(.scrolled) .top .menu > a[aria-current] { background: rgba(255,255,255,.18); color: #fff; }
  body.photohero:not(.scrolled) .top .top-cta,
  body.photohero:not(.scrolled) .top .me { background: #fff; border-color: #fff; color: var(--h2b); }
  body.photohero:not(.scrolled) .top .me em { color: var(--muted); }
}
@media (max-width: 900px) {
  body.photohero:not(.scrolled):not(.navopen) .navtoggle { border-color: rgba(255,255,255,.55); }
  body.photohero:not(.scrolled):not(.navopen) .navtoggle span { background: #fff; }
}

/* 세로 바로가기는 오른쪽 아래로. 가운데 두면 첫 화면 오른쪽 화살표와 자리를 다툽니다.
   레퍼런스도 전화·카톡·TOP 를 오른쪽 아래에 둡니다. */
.sidedock { top: auto; bottom: 28px; transform: none; }

@media (max-width: 900px) {
  .h-dim .shot::after { background: linear-gradient(to bottom, rgba(14,14,12,.50) 0%, rgba(14,14,12,.66) 100%); }
}
@media (max-width: 760px) {
  .h2-nav { display: none; }
  .h-dim.has-qb > .wrap, .h-overlap.has-qb > .wrap:last-of-type { padding-bottom: clamp(56px, 10vw, 74px); }
  .h-overlap .over { margin-top: -28px; }
  .h-center { min-height: min(88svh, 680px); padding-bottom: 96px; }
  .h-center .h2-pills { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 16px; }
  .h-center .h2-pills span { padding: 10px 6px; }
  .h-center .h2-pills span + span { border-left: 1px solid rgba(255,255,255,.22); }
  .h-left { min-height: min(88svh, 680px); padding-bottom: 92px; }
  .h-left > .wrap { grid-template-columns: minmax(0, 1fr); }
  .h2-card { justify-self: start; width: 100%; }
  .h-title h1 { font-size: clamp(32px, 9.6vw, 44px); }
  .h-title.has-qb { padding-bottom: clamp(48px, 12vw, 64px); }
  .h-title .h2-photo img { aspect-ratio: 4 / 3; }
  .h2-badge { transform: none; padding: 9px 12px; }
  .h2-hours { font-size: 12.5px; }
  .h-gallery { min-height: min(84svh, 620px); padding-bottom: 88px; }
  .h2-dots { bottom: 52px; }
}
/* ══ 첫 화면 · 네 원형 · 끝 ═══════════════════════════════════ */

/* ══ 움직임 ═══════════════════════════════════════════════════
   도구/견본/움직임.py 가 넣습니다. 숨기는 규칙은 html.mv(스크립트가 붙임)가 있어야만 삽니다.
   ══════════════════════════════════════════════════════════ */
html.mv [data-mv] { opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--mv-d, 0ms); }
html.mv [data-mv].in { opacity: 1; transform: none; }
/* 사진 가림막 — 아래에서 위로 걷힙니다. 사진 제 틀 안에서만 움직여 옆으로 넘치지 않습니다 */
html.mv [data-mvi] { clip-path: inset(100% 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.7,0,.2,1); transition-delay: var(--mv-d, 0ms); }
html.mv [data-mvi].in { clip-path: inset(0 0 0 0); }
/* 첫 화면 사진을 위로 120px 늘려 두고 스크롤 따라 내립니다 — 늘려 두지 않으면 위가 빕니다 */
html.mv.mv-px .h2-shot img, html.mv.mv-px .h-dim .shot img { height: calc(100% + 120px); margin-top: -120px; will-change: transform; }
body.is-scrolled .top { box-shadow: 0 10px 28px -22px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) {
  html.mv [data-mv] { opacity: 1; transform: none; transition: none; }
  html.mv [data-mvi] { clip-path: none; transition: none; }
}
/* ══ 움직임 · 끝 ═══════════════════════════════════════════ */

/* ══ 고유 ═══════════════════════════════════════════════════
   도구/견본/고유.py 가 넣습니다. 손대지 마세요.
   ══════════════════════════════════════════════════════════ */
@font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/gowunbatang-400.woff2') format('woff2'); }
@font-face { font-family: 'Gowun Batang'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/gowunbatang-700.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/fonts/cormorant.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('/fonts/cormorant-italic.woff2') format('woff2'); }

/* ── 바름공방 — 흙빛 낮은 채도 · 세리프 제목 · 살아 있는 이번 달 달력 (2026-09-28 다시 그림) ── */
:root { --paper: #F6F1E9; --card: #FFFCF7; --ink: #3B322B; --muted: #7D7066; --rule: #E4D8C6;
  --brand: #B5673E; --accent: #8A9A86; --clay: #EFE5D6;
  --hfont: 'Gowun Batang', serif; --latin: 'Cormorant Garamond', 'Gowun Batang', serif; }
body { background: var(--paper); color: var(--ink); }
header.top { background: rgba(246,241,233,.94); border-bottom: 1px solid var(--rule); }
.logo b { font-family: var(--hfont); }
.logo svg rect { fill: var(--brand); }
.btn { border-radius: 999px; font-weight: 600; }
.btn.fill { background: var(--brand); border-color: var(--brand); }
main h1, main h2 { font-family: var(--hfont); font-weight: 700; letter-spacing: -.03em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.ws-latin { font-family: var(--latin); font-style: italic; font-size: 19px; font-weight: 500; letter-spacing: .03em; color: var(--brand); margin: 0 0 12px; }
.ws-latin span { color: var(--accent); padding: 0 .2em; }
.ws-head h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.28; margin: 0 0 14px; }
.ws-head p { color: var(--muted); margin: 0 0 16px; max-width: 34em; }
.ws-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.ws-head-row > p { margin: 0; }
.ws-link { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 2px; }
.ws-link::after { content: ' →'; color: var(--brand); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #B9ADA2; flex: none; }

/* 첫 화면 — 왼쪽 7 사진 · 오른쪽 5 미색 판 */
.ws-hero { padding: 0 !important; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(620px, 90vh, 860px); }
.ws-shot { margin: 0; position: relative; overflow: hidden; }
.ws-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.ws-side { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 80px) clamp(24px, 4.5vw, 72px); }
.ws-side h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.2; margin: 0 0 18px; }
.ws-sub { color: var(--muted); font-size: 16px; margin: 0 0 28px; max-width: 26em; }
.ws-month { background: var(--card); border: 1px solid var(--rule); border-radius: 24px; padding: 20px 22px 22px; box-shadow: 0 30px 60px -48px rgba(90,50,30,.55); }
.ws-month-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.ws-month-h b { font-family: var(--hfont); font-size: 18px; } .ws-month-h span { font-size: 13px; color: var(--muted); } .ws-month-h em { font-style: normal; color: var(--brand); font-weight: 700; }
.ws-near { list-style: none; margin: 0 0 16px; padding: 0; }
.ws-near li { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.ws-near li b { font-weight: 600; } .ws-near li span { font-weight: 700; color: #5D7359; }
.ws-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 4px; font-size: 14px; }
.ws-open[data-state="open"] .dot { background: #5D8A5A; box-shadow: 0 0 0 4px rgba(93,138,90,.18); }
.ws-open small { color: var(--muted); font-size: 13px; }
.ws-addr { margin: 0; font-size: 13px; color: var(--muted); }

.ws-classes, .ws-cal, .ws-wait, .ws-glaze, .ws-way { padding: clamp(80px, 10vw, 140px) 0; }
/* 수업 넷 — 스펙 표 카드 */
.ws-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ws-cards li { background: var(--card); border: 1px solid var(--rule); border-radius: 26px; padding: 24px 22px 22px; display: flex; flex-direction: column; }
.ws-tag { align-self: flex-start; margin: 0 0 18px; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: #E6ECE3; color: #4F6A4B; }
.ws-cards h3 { font-family: var(--hfont); font-size: 22px; font-weight: 700; margin: 0; }
.ws-price { font-size: 34px; font-weight: 700; color: var(--brand); margin: 6px 0 16px; letter-spacing: -.04em; } .ws-price small { font-size: 15px; margin-left: 2px; }
.ws-cards dl { margin: auto 0 0; border-top: 1px solid var(--rule); }
.ws-cards dl div { padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.ws-cards dt { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .06em; } .ws-cards dd { margin: 2px 0 0; font-size: 14px; }

/* 이번 달 달력 */
.ws-cal { background: var(--clay); }
.ws-cal-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ws-pick { background: var(--card); border-radius: 22px; padding: 22px; margin-top: 10px; border: 1px solid var(--rule); }
.ws-pick-d { margin: 0; font-family: var(--hfont); font-size: 22px; font-weight: 700; }
.ws-pick-s { margin: 4px 0 6px; font-size: 16px; } .ws-pick-s b { font-size: 30px; color: #5D7359; letter-spacing: -.03em; }
.ws-pick.full .ws-pick-s b { color: #A8978A; }
.ws-fine { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.ws-board { background: var(--card); border-radius: 30px; padding: clamp(16px, 2.4vw, 28px); }
.ws-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ws-days li { min-height: 66px; border-radius: 14px; font-size: 13px; }
.ws-days li > b, .ws-days button { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 8px 8px; box-sizing: border-box; }
.ws-days li > b { font-size: 15px; font-weight: 600; color: #C3B5A8; }
.ws-days li.dh { min-height: 0; text-align: center; color: var(--muted); font-weight: 700; padding: 0 0 6px; }
.ws-days li.wk { background: var(--paper); }
.ws-days button { font: inherit; text-align: left; border: 0; border-radius: 14px; background: transparent; cursor: pointer; color: var(--ink); }
.ws-days button b { font-size: 15px; } .ws-days button span { font-size: 11.5px; font-weight: 700; }
.ws-days li.open button { background: #E6ECE3; } .ws-days li.open button span { color: #4F6A4B; }
.ws-days li.full button { background: #EEE6DC; color: #A8978A; } .ws-days li.full button span { text-decoration: line-through; }
.ws-days li.sel button { background: var(--brand); color: #fff; box-shadow: 0 14px 24px -14px rgba(181,103,62,.9); } .ws-days li.sel button span { color: #fff; }
.ws-days button:hover { outline: 1px solid var(--brand); }
.ws-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.ws-legend span { display: inline-flex; align-items: center; gap: 6px; } .ws-legend i { width: 12px; height: 12px; border-radius: 4px; }
.ws-legend .o { background: #E6ECE3; } .ws-legend .f { background: #EEE6DC; } .ws-legend .w { background: var(--paper); border: 1px solid var(--rule); }

/* 받기까지 — 사진 넷 가로 */
.ws-line { list-style: none; counter-reset: w; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ws-line li { counter-increment: w; display: flex; flex-direction: column; gap: 4px; }
.ws-line figure { margin: 0 0 14px; position: relative; border-radius: 200px 200px 22px 22px; overflow: hidden; }
.ws-line img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ws-line b { font-family: var(--hfont); font-size: 19px; }
.ws-line b::before { content: counter(w, decimal-leading-zero) '  '; font-family: var(--latin); font-style: italic; color: var(--brand); font-weight: 500; }
.ws-line span { color: var(--muted); font-size: 14.5px; }

/* 유약 */
.ws-glaze { background: var(--card); }
.ws-glaze-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ws-swatch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ws-swatch li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ws-swatch i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 42%), var(--g);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.12), 0 14px 24px -16px rgba(60,30,10,.5); margin-bottom: 10px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ws-swatch li:hover i { transform: translateY(-6px) rotate(-8deg); }
.ws-swatch b { font-family: var(--hfont); font-size: 17px; } .ws-swatch span { font-size: 12.5px; color: var(--muted); }

/* 오시는 길 */
.ws-way-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.ws-way figure { margin: 0; } .ws-way img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 30px; display: block; }
.ws-way h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; margin: 0 0 14px; }
.ws-way p { color: var(--muted); margin: 0 0 22px; }
.ws-hours { margin: 0 0 22px; border-top: 1px solid var(--ink); }
.ws-hours > div { display: grid; grid-template-columns: 100px 1fr; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ws-hours dt { font-weight: 700; } .ws-hours dd { margin: 0; }
footer.bot { background: var(--clay); }

@media (max-width: 1000px) { .ws-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ws-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ws-shot { aspect-ratio: 4 / 3; }
  .ws-cal-in, .ws-glaze-in, .ws-way-in { grid-template-columns: minmax(0, 1fr); }
  .ws-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-swatch { gap: 8px; }
  .ws-days li { min-height: 54px; } .ws-days li > b, .ws-days button { padding: 6px 5px; }
}
@media (max-width: 520px) { .ws-cards { grid-template-columns: minmax(0, 1fr); } .ws-days button span { font-size: 10px; } .ws-days { gap: 4px; } }


/* ── 공방 하위 화면 — 미색 판 · 세리프 제목 · 둥근 카드 ── */
.own-sub main > section:first-of-type { padding-top: clamp(40px, 6vw, 80px); background: var(--clay); }
.own-sub main > section:first-of-type h2, .own-sub main h1, .own-sub main h2 { font-family: var(--hfont); font-weight: 700; }
.own-sub main > section:first-of-type h2 { font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.03em; }
.own-sub .eyebrow { color: var(--brand); font-weight: 700; }
.own-sub table { border-radius: 20px; overflow: hidden; }
.own-sub .card, .own-sub .note, .own-sub .box { border-radius: 24px; }
.own-sub form.ask { background: var(--card); border: 1px solid var(--rule); border-radius: 28px; padding: clamp(18px, 3vw, 32px); }
.own-sub form.ask input, .own-sub form.ask textarea, .own-sub form.ask select { border-radius: 16px; background: var(--paper); }
.own-sub .btn { border-radius: 999px; }
/* 이용안내(terms)의 표 넷이 휴대폰 폭보다 넓어 화면이 옆으로 밀렸습니다(540px — 예전부터).
   좁은 화면에서는 표를 폭에 맞추고 칸 안에서 줄을 바꿉니다. */
/* 원래 CSS 가 표에 최소 폭 520px 을 줍니다 — 옆으로 밀어 보는 틀(.table-scroll) 안에서 쓰라는 값인데
   약관 표는 틀 없이 놓여 있었습니다. 약관 장(.terms)의 표만 풀고, 시간표처럼 틀 안의 표는 그대로 밀어 봅니다. */
@media (max-width: 600px) {
  .own-sub .terms table { min-width: 0; width: 100%; table-layout: fixed; }
  .own-sub .terms th, .own-sub .terms td { width: auto !important; white-space: normal; overflow-wrap: anywhere; }
}
/* ══ 고유 · 끝 ═══════════════════════════════════════════════ */