/* 온리원판 손님 화면 공용 스타일
   규칙은 docs/design-system.md. 대표가 보낸 두 번째 참고 이미지 (2026-11-04 «홈피 디자인 이렇게 바꾸자»):
   테두리 틀, 왼쪽 라벨 | 오른쪽 내용 2단, 고정폭(모노) 라벨, 둥근 사진, 각진 검정 단추, 칸 격자.
   바탕은 흰색 그대로 («바탕은 흰색으로 해주라»). 관리자(admin.css)는 일하는 화면이라 따로 둔다. */

/* 본문·제목 글꼴: 페이퍼로지 (대표 2026-11-06 글꼴 후보 셋 중 «난 2번 좋은데»).
   SIL Open Font License 1.1 — 상업용·웹 사용 무료. 공식 저장소 Freesentation/paperlogy 를 커밋으로 고정한다 (@main 은 바뀔 수 있음).
   쓰는 굵기는 400·500·600 뿐이라 셋만 읽는다. 페이퍼로지에 없는 글자는 Pretendard 로 나온다. */
/* 300·700 은 제목 전용 (대표 2026-11-11 «제목들에 색있는거는 두껍게 나머지는 얇게 해줘») — 제목에서만 쓰므로 나머지 글의 로딩은 그대로 */
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/Freesentation/paperlogy@8ef35f53b318c7ca914c52b1b382b9a8bad07a61/woff2/Paperlogy-3Light.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/Freesentation/paperlogy@8ef35f53b318c7ca914c52b1b382b9a8bad07a61/woff2/Paperlogy-7Bold.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/Freesentation/paperlogy@8ef35f53b318c7ca914c52b1b382b9a8bad07a61/woff2/Paperlogy-4Regular.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/Freesentation/paperlogy@8ef35f53b318c7ca914c52b1b382b9a8bad07a61/woff2/Paperlogy-5Medium.woff2") format("woff2"); }
@font-face { font-family: "Paperlogy"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/Freesentation/paperlogy@8ef35f53b318c7ca914c52b1b382b9a8bad07a61/woff2/Paperlogy-6SemiBold.woff2") format("woff2"); }
/* 고정폭 글꼴은 영문·숫자·기호에만 쓴다 (unicode-range 에 빈칸 U+0020 을 뺐다).
   고정폭 빈칸은 넓어서 한글 라벨이 「촬영  방식」처럼 벌어진다 → 빈칸과 한글은 본문 글꼴(페이퍼로지)로 */
@font-face { font-family: "WPM Mono"; font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0021-007E;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "WPM Mono"; font-style: normal; font-weight: 500; font-display: swap; unicode-range: U+0021-007E;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.2.7/files/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #ffffff;
  --ink: #111111;
  --ink-2: #4f4e4a;   /* 보조 본문 */
  --ink-3: #6f6e69;   /* 라벨·설명 — 흰 바탕에서 4.5:1 이상 */
  --ghost: #8f8e88;   /* 흐린 큰 글자(미포함 줄) 전용 — 큰 글자 기준 3:1 */
  --line: #dddcd6;    /* 구획선·틀 */
  --field: #cfcec8;   /* 입력칸 테두리 — 구획선보다 한 단계 진하게 */
  --tint: #f5f4f1;    /* 사진 자리, 입력칸 바탕 */
  --warn: #b0361e;
  /* 강조색 하나 (버건디) — 주요 글자(.hl)에만 쓴다: 첫 화면 «원판만», 강점의 «당일·빠른», 가격, 구획 제목의 핵심 말.
     대표 2026-11-09 «주요글자는 색을 좀 넣을까?» → 미리보기 셋 가운데 «그리고 주요문구는 버건디 색으로 변경».
     본문·단추·링크·선에는 쓰지 않는다 (색이 많아지면 강조가 흐려진다).
     흰 바탕 대비 7:1 이상이라 작은 글자에 써도 읽힌다 */
  --accent: #7c2236;

  --sans: "Paperlogy", "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  /* 라벨·단추·번호 (IBM Plex Mono). 한글과 빈칸은 Pretendard 로 나온다 */
  --mono: "WPM Mono", "Paperlogy", "Pretendard", "Pretendard Variable", -apple-system, system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);
  --fs-title: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --fs-head: clamp(1.125rem, 1rem + .45vw, 1.375rem);  /* 칸·줄 제목 */
  --fs-row: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  --fs-q: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --fs-small: .875rem;
  --fs-label: .75rem;

  --radius: 10px;     /* 사진 */
  --radius-sm: 4px;   /* 단추·입력칸 */
  --wrap: 1320px;
  --frame: 0px;       /* 틀 바깥 여백 — 폰은 틀 없이 화면 끝까지 */
  --gutter: 16px;     /* 틀 안쪽 여백 */
  --pad: 48px;        /* 구획 안 위아래 여백 */
  --sec: 56px;        /* 다른 쪽(문의·작가 등) 구획 사이 */
}
@media (min-width: 720px) { :root { --frame: 24px; --gutter: 32px; --pad: 64px; --sec: 88px; } }
@media (min-width: 1024px) { :root { --frame: 32px; --gutter: 44px; --pad: 80px; --sec: 112px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--bg);
  line-height: 1.7; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
  letter-spacing: .02em;   /* 페이퍼로지는 글자 사이가 좁다 (2026-11-06) */
}
img { max-width: 100%; display: block; }
a { color: inherit; }
input, button, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 500; letter-spacing: 0; line-height: 1.25; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 틀 — 모든 줄(머리·구획·바닥)이 이 폭 안에서 양끝까지 그어져 세로선과 만난다.
   세로선은 body 높이만큼 (fixed 로 하면 전체 화면 캡처에서 첫 화면 아래가 끊긴다) */
.wrap { width: min(100% - 2 * var(--frame), var(--wrap)); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) {
  body { position: relative; min-height: 100vh; }
  body::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: min(100% - 2 * var(--frame), var(--wrap));
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    pointer-events: none; z-index: 50;
  }
}

/* ---------- 글자 단위 ---------- */
/* 라벨 — 고정폭, 영문 대문자, 자간 넓게. 구획 이름·작은 이름표 */
.kicker { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: var(--ink); }
.kicker .n, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink-3); margin-right: .7em; }
.display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; font-weight: 300; text-wrap: balance; }
.title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; text-wrap: balance; }
.lead { color: var(--ink-2); max-width: 36rem; }
/* 주요 글자 — 한 제목에 한 군데만 */
.hl { color: var(--accent); }
/* 제목은 색 있는 말(.hl)만 두껍게, 나머지는 얇게 (대표 2026-11-11 «제목들에 색있는거는 두껍게 나머지는 얇게 해줘») */
.display, .sec-title { font-weight: 300; }
.display .hl, .sec-title .hl { font-weight: 700; }
/* 금액 칸 [data-fmt] — HTML 에 금액을 적어 두지 않고, 설정을 읽은 뒤 site.js fillSettings 가 채운다.
   적어 둔 옛 금액(20만원)이 잠깐 보였다가 설정값(25만원)으로 바뀌었다 (대표 2026-11-10 «이게 가격이 20만원에서 25만원으로 바뀌네»).
   비어 있는 동안에도 한 줄 높이와 대략의 폭을 잡아 둬서, 채워질 때 글이 밀리지 않는다. */
[data-fmt]:empty { display: inline-block; min-width: 3.5em; }
[data-fmt]:empty::before { content: '\00a0'; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); line-height: 1.6; }
.pre { white-space: pre-line; }
.prose { max-width: 34rem; }
.prose p + p { margin-top: 14px; }

/* 괄호 링크 — ( 작가 목록 ) */
.paren { display: inline-flex; align-items: center; padding: 6px 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.paren::before { content: "(\00a0"; }
.paren::after { content: "\00a0)"; }
.paren:hover span, .paren:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 머리 ---------- */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; border-bottom: 1px solid var(--line); }
/* 글자 로고 앞 작은 표 — 가로 사진 틀과 가운데 점 (원판의 「가운데」) */
/* 자간은 대표 2026-11-04 «로고 글자를 자간을 좀 줄여줘» 로 .08em → .02em */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; text-decoration: none; white-space: nowrap; padding: 8px 0; }
.brand::before {
  content: ""; flex: none; width: 24px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17' fill='none' stroke='%23111111' stroke-width='1.3'%3E%3Crect x='.65' y='.65' width='22.7' height='15.7' rx='1.5'/%3E%3Ccircle cx='12' cy='8.5' r='2.6' fill='%23111111' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { font-family: var(--mono); text-decoration: none; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding: 8px 10px; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.site-nav .nav-cta { color: var(--bg); background: var(--ink); border-radius: var(--radius-sm); padding: 9px 14px; margin-left: 8px; }
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current="page"] { color: var(--bg); background: #333; text-decoration: none; }
@media (max-width: 560px) { .site-nav a { padding: 8px 8px; } .site-nav .nav-cta { margin-left: 4px; } }

/* 데모 모드 알림 — 틀 세로선보다 위 */
.demo-note { position: relative; z-index: 60; background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: var(--fs-label); text-align: center; padding: 6px var(--gutter); letter-spacing: .02em; }

main { display: block; }
/* 다른 쪽(문의·작가·등록·방침)은 main 이 틀 하나 — 바닥 줄 앞에 여백 */
main.wrap { padding-bottom: var(--sec); }

/* ---------- 단추 — 각진 검정 (참고 이미지) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid var(--ink); font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; line-height: 1.2; transition: background .15s, color .15s; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .75rem; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #333; border-color: #333; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-line { background: var(--bg); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn-block { width: 100%; }
/* 카카오 문의 — 카카오 노랑 + 말풍선 (대표 2026-11-07 «문의하기는 카카오문의하기로 하고 노락색 박스로»).
   카카오 안내대로 바탕 #FEE500, 글자 검정 85% */
.btn-kakao, .site-nav .nav-kakao { background: #fee500; color: rgba(0, 0, 0, .85); border-color: #fee500; }
.btn-kakao:hover, .site-nav .nav-kakao:hover { background: #f5dc00; border-color: #f5dc00; color: rgba(0, 0, 0, .85); text-decoration: none; }
.btn-kakao::before, .site-nav .nav-kakao::before {
  content: ''; flex: none; width: 1.15em; height: 1.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3C6.48 3 2 6.58 2 11c0 2.83 1.87 5.32 4.68 6.73l-.96 3.53c-.08.3.26.54.52.37l4.2-2.78c.51.06 1.03.1 1.56.1 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .85;
}
.site-nav .nav-kakao { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); padding: 9px 12px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* 폰에서는 머리 줄이 한 줄에 들어가게 «카카오»를 빼고 말풍선 + «문의하기»만 (노란 바탕이 카카오임을 알려 준다)
   2026-11-08 머리에 「갤러리」가 늘어 (대표 «갤러리도 만들어야 겠어») 갤러리가 있는 머리에서는 «문의하기»(.kt)도 빼고 말풍선만 둔다.
   단추 이름은 aria-label «카카오 문의하기» 로 남는다. 첫 화면·맨 아래 큰 단추는 그대로 «카카오 문의하기» */
@media (max-width: 430px) {
  .site-head .wrap { gap: 8px; }
  .site-nav .nav-gal { padding: 8px 6px; }
  .site-nav .nav-kakao .kk, .site-nav .nav-kakao .kt { display: none; }
  .site-nav .nav-kakao { padding: 9px 10px; gap: 5px; }
  .site-nav .nav-cta { padding: 9px 10px; }
}
/* 아주 좁은 폰(320px)에서는 더 좁힌다 */
@media (max-width: 350px) {
  .site-nav .nav-kakao { padding: 9px 9px; }
  .site-nav .nav-cta { padding: 9px 9px; margin-left: 2px; }
  .brand { gap: 6px; font-size: .75rem; }
  .brand::before { width: 20px; height: 14px; }
  .site-nav .nav-gal { padding: 8px 5px; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- 구획: 틀 끝까지 윗줄 + 왼쪽 라벨 | 세로선 | 오른쪽 내용 ---------- */
.sec > .wrap, .strip-sec > .wrap { border-top: 1px solid var(--line); }
/* 구획 번호는 여기서 센다 — 숨긴 구획(사진 없음)은 건너뛰어 번호가 비지 않는다 */
main { counter-reset: sec; }
main .sec:not([hidden]) { counter-increment: sec; }
.sec-side .kicker .n::before { content: "(" counter(sec, decimal-leading-zero) ")"; }
/* 구획 이름표는 조금 크게 — 12px → 15px (대표 2026-11-09 «(01) 왜원판만? 이부분 글자들 1,2,3, 4, ... 다 포함 크기를 조금 키워줘») */
.sec-side .kicker { font-size: .9375rem; }
.sec-grid { display: grid; gap: 28px; padding: var(--pad) 0; }
.sec-title { font-size: var(--fs-title); line-height: 1.2; letter-spacing: -.01em; font-weight: 300; margin-top: 20px; text-wrap: balance; font-variant-numeric: tabular-nums; }
.side-text { margin-top: 14px; color: var(--ink-2); font-size: .9375rem; max-width: 24rem; }
.sec-side .btn { margin-top: 24px; }
/* 세로선이 위아래 줄에 닿도록 여백은 양쪽 칸이 각자 갖는다 */
@media (min-width: 1024px) {
  .sec-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; padding: 0; }
  .sec-side { grid-column: 1 / 5; padding: var(--pad) 40px var(--pad) 0; }
  .sec-main { grid-column: 5 / -1; min-width: 0; border-left: 1px solid var(--line); padding: var(--pad) 0 var(--pad) 40px; }
}

/* 라벨 왼쪽 반, 본문 오른쪽 반 (작가 목록 아래 「작가 등록」 등) */
main.wrap > .sec { padding-top: var(--sec); }
.split { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 20px; }
.split .prose .paren { margin-top: 18px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .split > :first-child { grid-column: 1 / 5; }
  .split > :last-child { grid-column: 5 / -1; }
}

/* ---------- 첫 화면: 왼쪽 큰 제목, 오른쪽 둥근 사진 ---------- */
.hero-grid { display: grid; gap: 32px; padding: 36px 0 var(--pad); }
.hero-text, .hero-sub { display: flex; flex-direction: column; }
.hero-sub { flex: 1; }
.hero-text > .kicker { margin-bottom: 18px; color: var(--ink-3); }
/* 강점 셋 — 큰 제목 다음 크기, 줄로 나눈다 (대표 2026-11-06 «이렇게 강조하자») */
.hero-points { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.hero-points li { display: grid; grid-template-columns: 2.5rem auto 1fr; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-title); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.hero-points .num { font-size: var(--fs-label); letter-spacing: .02em; }
/* 옆에 작게 (대표 2026-11-07) — 오른쪽 끝에 붙인다. 자리가 모자라면 두 줄로 */
.hero-points .d { justify-self: end; align-self: center; margin-left: 14px; max-width: 13em; text-align: right; font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
.hero .lead { margin-top: 22px; font-size: 1.0625rem; max-width: 26rem; }
/* 한 줄 글도 가격·단추처럼 오른쪽 정렬 (대표 2026-11-07 «저 감성적인 순간은... 글자도») */
.hero-sub .lead { margin-left: auto; text-align: right; }
/* 가격·단추는 오른쪽 정렬 (대표 2026-11-07 «이부분은 오른쪽 정렬로»).
   가격은 한 줄 글과 단추 사이에 쌓는다 — 넓은 화면에서도 가격 옆에 단추를 붙이지 않는다
   (대표 2026-11-09 «25만원 저거는 브라우져가 최대로 늘어났을때 예약하기 위에 들어가게 해줘 / 문구랑 예약하기 버튼 사이에»).
   폰은 원래 두 줄로 나뉘어 이 모양이었다 */
.hero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; margin-top: 32px; }
.hero-cta .hero-btns { justify-content: flex-end; }
.hero-price { display: grid; gap: 2px; justify-items: end; text-align: right; }
.hero-price .kicker { color: var(--ink-3); }
/* 가격 숫자는 제목보다 크게 (대표 2026-11-07 «가격 숫자 더 키워줘») */
.hero-price [data-set] { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
/* 사람 사진은 얼굴이 위쪽에 있다 — 잘라 낼 때 위쪽을 더 남긴다 */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 720px) {
  .hero-grid { padding-top: 56px; }
  .hero-cta { gap: 20px; }
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; padding-top: 64px; }
  .hero-text { grid-column: 1 / 7; }
  .hero-cta { margin-top: auto; padding-top: 40px; }   /* 사진 아래 끝에 맞춘다 */
  .hero-photo { grid-column: 7 / -1; aspect-ratio: 7 / 6; }
  /* 샘플 사진이 없으면: 큰 제목은 왼쪽, 한 줄·가격·단추는 오른쪽 아래 (오른쪽 반이 비지 않게) */
  .hero-grid:has(.hero-photo[hidden]) .hero-text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .hero-grid:has(.hero-photo[hidden]) .hero-text > .kicker { grid-column: 1 / -1; }
  .hero-grid:has(.hero-photo[hidden]) .display { grid-column: 1 / 8; grid-row: 2; }
  .hero-grid:has(.hero-photo[hidden]) .hero-points { grid-column: 1 / 8; grid-row: 3; }
  .hero-grid:has(.hero-photo[hidden]) .hero-sub { grid-column: 8 / -1; grid-row: 2 / 4; align-self: end; }
  .hero-grid:has(.hero-photo[hidden]) .lead { margin-top: 0; }
  .hero-grid:has(.hero-photo[hidden]) .hero-cta { margin-top: 0; padding-top: 32px; }
}

/* ---------- 촬영 현장 사진 줄 ----------
   대표 2026-11-08 «필름 스트립처럼 … 크진 않게 작게 … 쓱쓱 지나가면서», «여기는 그냥 전체가 이미지가 흘러갔음 하는데 사진사이 간격은 그냥 한 2픽셀정도로».
   라벨 칸 없이 줄 전체에 사진이 흐른다. 사진 사이 2px 이라 한 장씩 둥글리면 틈이 패여 보여서, 둥근 모서리는 줄 바깥에만 준다.
   폰은 세 장이 한 줄에 꼭 차고, 넓은 화면은 한 장을 240px 로 묶어 키우지 않는다 (작게).
   줄은 똑같은 두 반쪽으로 되어 있고 반쪽(-50%)만큼 움직인다 — 반쪽마다 사진 묶음을 화면보다 넓게 몇 번 이어 붙인다.
   묶음 끝에도 2px 을 두어 이음매가 사진 사이와 같다. 속도는 사진 한 장에 16초 (반쪽 길이에 맞춰 시간을 늘린다).
   기본 세 장은 반쪽에 두 묶음 = 여섯 장 → 96초. 관리자가 바꾼 사진은 index.html 이 같은 규칙으로 다시 짜고 시간을 적는다.
   대표 2026-11-08 «속도를 지금보다 절반으로 그리고 그 가로를 더 넓혀서 사방에 마진을 똑같이» → 한 바퀴 24s→48s,
   줄 둘레 여백을 위·아래·왼쪽·오른쪽 모두 같게 (--strip-m). 넓은 화면의 세로 틀선은 틀 안쪽 1px 에 그려지므로 좌우에 1px 을 더한다.
   폰은 세로 틀선이 없어 화면 끝까지가 틀 — 다른 글과 같은 16px */
.strip-sec { --strip-m: 16px; }
.strip-sec > .wrap { padding: var(--strip-m); }
@media (min-width: 720px) { .strip-sec { --strip-m: 24px; } .strip-sec > .wrap { padding-left: calc(var(--strip-m) + 1px); padding-right: calc(var(--strip-m) + 1px); } }
.strip { overflow: hidden; border-radius: var(--radius); container-type: inline-size; }
.strip-track { display: flex; width: max-content; animation: strip-run 96s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-set { display: flex; gap: 2px; padding-right: 2px; }
.strip-set img { flex: none; width: min(calc((100cqw - 4px) / 3), 240px); height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--tint); }
@keyframes strip-run { to { transform: translateX(-50%); } }
/* 움직임 줄이기 설정이면 멈춰 둔다 */
@media (prefers-reduced-motion: reduce) { .strip-track { animation: none; } }

/* ---------- 칸 격자 — 칸 사이 가는 선 (참고 이미지 「WHAT WE DO」) ---------- */
.cells { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); }
.cells > * { position: relative; padding: 22px 0; border-top: 1px solid var(--line); min-width: 0; }
.cells > :first-child { border-top: none; padding-top: 0; }
.cells > :last-child { padding-bottom: 0; }
.cells .num { display: block; font-size: var(--fs-label); margin-bottom: 8px; }
.cells b, .cells h3 { display: block; font-size: var(--fs-head); font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.cells .d { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-2); max-width: 26rem; }
.cells .d.note { color: var(--ink-3); }
/* 강조 설명 — 검정·두껍게·조금 크게 (대표 2026-11-09 «아이폰 스냅, 메인 스냅, 서브 스냅 등 모든 작가와 함께할 수 있습니다. 이걸 강[조]») */
.cells .d.em { color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.cells .who { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.cells .price { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; margin-left: 6px; vertical-align: .12em; }
/* 선 그림 — 뜻을 보태는 것만 (옵션·촬영 방식). 장식으로 늘리지 않는다 */
.ico { display: block; width: 36px; height: 36px; margin-bottom: 20px; fill: none; stroke: var(--ink); stroke-width: 1.1; }
/* 폰: 기본 촬영 아홉 줄은 번호를 왼쪽에 (세로로 너무 길어지지 않게) */
@media (max-width: 719px) {
  .shots > li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); padding: 15px 0; }
  .shots > li:first-child { padding-top: 0; }
  .shots .num { margin: .4em 0 0; }
  .shots .d { grid-column: 2; margin-top: 4px; }
}
@media (min-width: 720px) {
  .cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cells > * { padding: 28px 24px; }
  /* 칸 사이 세로선 — 줄 사이 가로선과 닿지 않게 위아래를 띄운다 */
  .cells > *::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; border-left: 1px solid var(--line); }
  /* 첫 줄: 윗선 없음 / 줄 첫 칸: 세로선·왼쪽 여백 없음 / 끝 줄: 아래 여백 없음 */
  .cells-2 > :nth-child(-n+2), .cells-3 > :nth-child(-n+3) { border-top: none; padding-top: 0; }
  .cells-2 > :nth-child(-n+2)::before, .cells-3 > :nth-child(-n+3)::before { top: 0; }
  .cells-2 > :nth-child(2n+1), .cells-3 > :nth-child(3n+1) { padding-left: 0; }
  .cells-2 > :nth-child(2n+1)::before, .cells-3 > :nth-child(3n+1)::before { display: none; }
  .cells-2 > :nth-child(2n+1):nth-last-child(-n+2), .cells-2 > :nth-child(2n+1):nth-last-child(-n+2) ~ *,
  .cells-3 > :nth-child(3n+1):nth-last-child(-n+3), .cells-3 > :nth-child(3n+1):nth-last-child(-n+3) ~ * { padding-bottom: 0; }
  .cells-2 > :nth-child(2n+1):nth-last-child(-n+2) ~ *::before,
  .cells-3 > :nth-child(3n+1):nth-last-child(-n+3) ~ *::before { bottom: 0; }
}

/* 한 구획 안의 작은 묶음 이름 — 기본에서 찍지 않는 것 */
.group-label { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
* + .group-label { margin-top: 56px; }

/* ---------- 줄 목록: 제목 / 설명 / 오른쪽 표시 ---------- */
.list-rows { list-style: none; border-top: 1px solid var(--line); }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.lr:first-child { border-top: none; }
.lr:last-child { padding-bottom: 0; }
.lr-t { font-size: var(--fs-head); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.lr-d { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-2); max-width: 30rem; }
.lr-m { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.lr-m::before { content: "(\00a0"; } .lr-m::after { content: "\00a0)"; }
/* 아닌 것(미포함)은 흐리게 — 오른쪽 «미포함» 글자가 같은 뜻을 말해 준다 */
.lr.off .lr-t { color: var(--ghost); }
.lr.off .lr-d, .lr.off .lr-m { color: var(--ink-3); }
@media (min-width: 1024px) {
  .lr { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; column-gap: 24px; padding: 18px 0; }
  .lr > * { grid-row: 1; }  /* 마크업 순서(제목·표시·설명)와 칸 순서가 달라 줄이 밀리지 않게 */
  .lr-t { grid-column: 1; }
  .lr-d { grid-column: 2; }
  .lr-m { grid-column: 3; text-align: right; }
}

/* ---------- 진행 순서 — 번호 / 제목 / 설명 ---------- */
.steps { list-style: none; }
.steps li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 4px 8px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: none; padding-top: 0; }
.steps li:last-child { padding-bottom: 0; }
.steps .num { font-size: var(--fs-label); padding-top: .45em; margin: 0; }
.steps b { font-size: var(--fs-head); font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.steps span.d { grid-column: 2; font-size: var(--fs-small); color: var(--ink-2); max-width: 30rem; }
@media (min-width: 1024px) {
  .steps li { grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; padding: 22px 0; align-items: baseline; }
  .steps .num { padding-top: 0; }
  .steps span.d { grid-column: 3; }
}

/* ---------- 납품 기준 — 이름 / 값 ---------- */
.spec > div { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); }
.spec > div:first-child { border-top: none; padding-top: 0; }
.spec > div:last-child { padding-bottom: 0; }
.spec dt { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.spec dd .muted { display: block; font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; margin-top: 4px; }
/* 홈 「납품」 칸 이름은 크고 두껍게, 검정 (대표 2026-11-09 «(04) 납품 설명에 원본 보정 여기도 좀 키우고 두껍게 해줘») */
#delivery .spec dt { font-size: .9375rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
@media (min-width: 720px) {
  .spec > div { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 24px; padding: 22px 0; align-items: baseline; }
}

/* ---------- 자주 묻는 질문 — 접었다 펴기 ---------- */
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: none; }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 40px 20px 0; font-size: var(--fs-q); font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.faq details:first-child summary { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
/* + / − 는 선 두 개로 그린다 */
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.5px; background: var(--ink); }
.faq summary::after { transform: rotate(90deg); }
.faq details:first-child summary::before, .faq details:first-child summary::after { top: calc(50% - 10px); }
.faq details[open] summary::after { display: none; }
.faq details p { padding: 0 40px 22px 0; color: var(--ink-2); font-size: var(--fs-small); max-width: 40rem; }
.faq details:last-child:not([open]) summary { padding-bottom: 0; }
.faq details:last-child:not([open]) summary::before, .faq details:last-child:not([open]) summary::after { top: calc(50% + 10px); }
.faq details:first-child:last-child:not([open]) summary::before, .faq details:first-child:last-child:not([open]) summary::after { top: 50%; }
.faq details:last-child[open] p { padding-bottom: 0; }

/* ---------- 촬영 사진 — 첫 장 넓게, 나머지 두 칸. 모서리 둥글게 ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 16px; align-items: start; }
.gallery .ph { aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--tint); }
/* 가로 사진(단체 원판)은 3:2 로 — 세로로 자르면 양쪽 사람이 잘린다 (2026-11-04 첫 실제 사진) */
.gallery figure.wide .ph, .gallery figure.span .ph { aspect-ratio: 3 / 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gallery figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; font-size: .9375rem; font-weight: 500; letter-spacing: .01em; }
.gallery figcaption .num { order: 2; font-size: var(--fs-label); margin: 0; }
@media (min-width: 720px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure.span { grid-column: 1 / -1; }
}

/* 마지막 문의 유도 */
.cta .display { font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); max-width: 12em; }
.cta .lead { margin-top: 20px; }

/* ---------- 바닥 ---------- */
.site-foot { padding-bottom: 40px; font-size: var(--fs-small); color: var(--ink-3); }
.site-foot .wrap { border-top: 1px solid var(--line); padding-top: 26px; display: grid; gap: 18px; }
.site-foot .foot-brand { font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-foot .foot-links a { text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; padding: 4px 0; }
.site-foot .foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-foot .biz { line-height: 1.8; font-size: .8125rem; }
.site-foot .biz span + span::before { content: "·"; margin: 0 6px; color: var(--field); }
@media (min-width: 1024px) { .site-foot .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; } .site-foot .foot-brand { grid-column: 1 / 5; } .site-foot .foot-links { grid-column: 5 / -1; padding-left: 40px; } .site-foot .biz { grid-column: 1 / -1; } }

/* ---------- 쪽 머리 (문의·작가·등록·방침) ---------- */
.page-head { padding: 48px 0 8px; }
.page-head .kicker { margin-bottom: 18px; }
.page-head h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; text-wrap: balance; }
@media (min-width: 720px) { .page-head { padding: 72px 0 12px; } }
/* 내 예약 = 계약서를 대신하는 페이지라는 줄 — 진행 안내 줄보다 먼저, 진하게 */
.page-head .contract { color: var(--ink); font-weight: 500; margin-bottom: 10px; }

/* ---------- 폼 ---------- */
.form-wrap { max-width: 760px; }
.form { margin-top: 40px; }
/* fieldset 은 기본 min-width 가 내용 폭이라 폰에서 가로로 넘친다 → 0 으로 */
.fieldset { border: none; border-top: 1px solid var(--line); padding: 14px 0 32px; min-width: 0; }
.fieldset > legend, .fieldset > .legend { display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 0; margin-bottom: 4px; }
.field { margin-top: 18px; }
.field label, .field .label { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: 8px; }
.field .req { color: var(--warn); margin-left: 2px; }
.field .hint, .fieldset > .hint { font-size: .8125rem; color: var(--ink-3); margin-top: 6px; }
.field input[type=text], .field input[type=tel], .field input[type=date], .field input[type=time],
.field input[type=url], .field input[type=email], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--bg);
  appearance: none; -webkit-appearance: none; min-height: 50px; line-height: 1.4;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { resize: none; min-height: 110px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #a9a8a2; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.grid-2 { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
/* 봇만 채우는 칸 — 사람 눈에는 안 보이게 */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 체크 목록 (동의 등) — 선으로 나눈 줄 */
.checks { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 18px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.check:first-child { border-top: none; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ink); flex: 0 0 auto; }
.check .t { font-size: .9375rem; }
.check .t small { display: block; color: var(--ink-3); font-size: .8125rem; margin-top: 2px; }
.check .t a { color: var(--ink); text-underline-offset: 3px; }

/* 종류 고르기 (라디오) — 한 줄로 이어 붙인 칸 */
.seg { display: flex; border: 1px solid var(--field); border-radius: var(--radius-sm); overflow: hidden; }
.seg label { flex: 1; text-align: center; padding: 13px 6px; font-size: .875rem; margin: 0; cursor: pointer; border-left: 1px solid var(--field); font-weight: 500; }
.seg label:first-child { border-left: none; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -4px; }

/* 칩 입력 (지역·스타일) */
.chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--bg); min-height: 50px; cursor: text; }
.chips-input:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chips-input input { border: none !important; outline: none; box-shadow: none !important; flex: 1 1 120px; min-width: 100px; padding: 6px 4px !important; min-height: 0 !important; background: transparent; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--tint); border-radius: var(--radius-sm); padding: 3px 6px 3px 10px; font-size: .8125rem; }
.chip button { border: none; background: none; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--ink-3); font-size: 1rem; line-height: 1; }
.chip button:hover { background: var(--line); color: var(--ink); }

.form-msg { margin-top: 12px; font-size: var(--fs-small); color: var(--warn); min-height: 1.2em; }
.form-actions { margin-top: 8px; }
.form-actions .small { margin-top: 12px; }

/* 접수 완료 */
.done { border-top: 1px solid var(--ink); padding-top: 20px; margin-top: 40px; }
.done h2 { font-size: var(--fs-title); margin-bottom: 14px; }
.done ul { list-style: none; margin-top: 12px; border-bottom: 1px solid var(--line); }
.done li { padding: 12px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.done li:first-child { border-top: none; }
/* 예약하기 신청 뒤 「자주 묻는 질문」 (대표 2026-11-11 «그 아래 는 궁금할만한 faq를 짧게 넣을까?») — 짧아서 접지 않는다.
   작은 고정폭 라벨 아래 줄마다 질문·답. 폰은 질문 위·답 아래, 넓은 화면은 왼쪽 질문 | 오른쪽 답 */
.done h2.done-k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; }
.qa > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.qa > div:first-child { border-top: none; padding-top: 8px; }
.qa > div:last-child { border-bottom: 1px solid var(--line); }
.qa dt { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.qa dd { font-size: .9375rem; line-height: 1.65; color: var(--ink-2); }
.qa dd a { margin-left: .25em; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .qa > div { grid-template-columns: 15rem minmax(0, 1fr); column-gap: 24px; align-items: baseline; } }

/* 관심 작가 표시 (작가 페이지에서 넘어온 경우) */
.picked { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--tint); border-radius: var(--radius-sm); margin-top: 18px; }
.picked img { width: 48px; height: 60px; object-fit: cover; background: var(--line); border-radius: var(--radius-sm); }
.picked .t { flex: 1; font-size: var(--fs-small); }
.picked .t b { display: block; font-size: .9375rem; font-weight: 500; }

/* ---------- 예약 신청 폼 (대표 2026-11-09) ---------- */
/* 화면에는 안 보이고 읽어 주기만 하는 글 — 「이름」 같은 이름표가 신부·신랑 두 줄에 있을 때 누구 칸인지 알려 준다 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 맨 위 규정 안내 — 테두리 틀 한 줄: 글 | 단추 (대표 «예약신청 제일 위에 링크 넣고 확인하게») */
.rules-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rules-box p { flex: 1 1 16rem; font-size: .9375rem; color: var(--ink-2); }
.rules-box p b { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; }
.check.invalid input { outline: 2px solid var(--warn); outline-offset: 2px; }
.check.invalid .t { color: var(--warn); }

/* 예식일 달력·시간 — 브라우저 기본 칸 대신 (대표 «예식 일, 예식 시간 우리 스타일에 맞게 만들어서 해줘 기본 양식말고»).
   칸 모양은 작가 일정 달력(.cal)과 같다: 가는 선 네모, 고른 칸은 검정 */
.datepick { max-width: 460px; }   /* 달력과 시간 단추의 오른쪽 끝을 맞춘다 */
.datepick .cal { max-width: none; }
.datepick .cal-nav { gap: 6px; }
.field .datepick .cal-nav select { flex: 1; width: auto; min-width: 0; min-height: 40px; padding: 6px 34px 6px 12px; text-align: center; text-align-last: center; font-weight: 600; background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px; }
.cal button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cal button[data-today]:not([aria-pressed="true"]) .d { text-decoration: underline; text-underline-offset: 3px; }
.timepick { display: grid; gap: 6px; max-width: 460px; }
.tp-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 8px; align-items: start; }
.tp-k { padding-top: 12px; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
/* 시 단추는 폰 4칸(오후 12~7시가 4·4로 끊긴다), 넓은 화면 8칸(한 줄). 분은 늘 6칸 한 줄 */
.tp-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tp-btns[data-mins] { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 360px 아래는 3칸 두 줄 — 6칸이면 「00분」이 두 줄로 꺾인다 */
@media (min-width: 360px) { .tp-btns[data-mins] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 640px) { .tp-btns[data-hours] { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.tp-btns button, .chip-btns button { min-height: 44px; padding: 0 2px; white-space: nowrap; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.tp-btns button:hover, .chip-btns button:hover { border-color: var(--ink); }
.tp-btns button[aria-pressed="true"], .chip-btns button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* 고르기 단추 — 알게 된 경로 (대표 2026-11-11 «어떻게 알게 되셨나요?는 버튼 선택으로»). 시간 단추와 같은 모양, 폰 3칸 · 넓은 화면 6칸 한 줄 */
.chip-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 640px) { .chip-btns { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pick-out { margin-top: 10px; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.pick-out.unset { color: var(--ink-3); font-weight: 400; }   /* 아직 안 고름 — .empty(빈 목록 칸)와 다른 이름 */
.field.invalid .pick-out { color: var(--warn); }

/* 신부·신랑 줄 — 이름표 | 이름 | 휴대폰 | 링크 받기 (대표 «둘중하나는 예약 링크 카톡을 받을 꺼야 받을 사람 체크 할 수 있게»).
   폰은 이름표와 「링크 받기」를 윗줄에, 이름·휴대폰을 아랫줄에 둔다 (휴대폰 칸을 넓게 — 320px 에서 010-0000-0000 이 잘렸다) */
.people { margin-top: 4px; }
.person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "who to" "name phone"; gap: 0 12px; align-items: end; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.person:first-child { border-top: none; }
.person .who { grid-area: who; align-self: center; font-weight: 600; }
.person .req { color: var(--warn); margin-left: 2px; }
.person .f-name { grid-area: name; }
.person .f-phone { grid-area: phone; }
.person .field { margin-top: 10px; }
.person .link-to { grid-area: to; justify-self: end; }
.link-to { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--bg); font-size: .875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.link-to input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.link-to:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (min-width: 640px) {
  .person { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "who name phone to"; }
  .person .who { align-self: end; padding-bottom: 13px; }
  .person .link-to { min-height: 50px; }
}

/* 예상 합계 — 맨 아래 단추 바로 위 (대표 «제일 아래에 예상합계 금액 보여줘») */
.est { margin: 8px 0 20px; padding: 18px 20px; border: 1px solid var(--ink); border-radius: var(--radius-sm); }
.est-k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.est-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9375rem; }
.est-rows dt { color: var(--ink-2); }
.est-rows dd { font-variant-numeric: tabular-nums; }
.est-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.est-total b { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.est-note { margin-top: 10px; font-size: .8125rem; color: var(--ink-3); }

/* ---------- 규정 쪽 (대표 2026-11-09 «규정을 만들어야겠네») — 구획마다 왼쪽 이름표 | 오른쪽 줄로 나눈 문장 ---------- */
.rule-intro { color: var(--ink-2); font-size: .9375rem; margin-bottom: 16px; max-width: 40rem; }
.rule-list { list-style: none; }
.rule-list li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.65; }
.rule-list li:first-child { border-top: none; padding-top: 0; }
.rule-list li:last-child { padding-bottom: 0; }
/* 조건 | 결과 두 칸 (보상·위약금) — 폰은 위아래 */
.rule-list.pairs li { display: grid; gap: 2px 24px; }
.rule-list.pairs li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-list.pairs li:first-child { padding-top: 12px; border-top: 1px solid var(--line); }
.rule-list.pairs li:last-child { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .rule-list.pairs li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .rule-list.pairs li b { text-align: right; } }
.rule-note { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-3); max-width: 40rem; }

/* ---------- 팝업 .pop (<dialog>) — 예약하기 「규정 보기」 (대표 2026-11-11 «규정은 팝업으로 뜨게 해줘 / 예약페이지에») ----------
   흰 틀 하나: 위(제목 | 닫기) · 가운데만 스크롤 · 아래 닫기 단추. 넓은 화면은 가운데 720px, 폰은 화면을 다 덮는다. 움직임 없음 */
.pop { padding: 0; margin: auto; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink);
       width: min(720px, 100% - 32px); max-width: none; max-height: min(88vh, 960px); }
.pop[open] { display: flex; flex-direction: column; }
.pop::backdrop { background: rgba(17, 17, 17, .45); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.pop-head h2 { font-size: var(--fs-head); font-weight: 600; line-height: 1.35; }
.pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 28px; }
.pop-foot { padding: 12px 20px; border-top: 1px solid var(--line); }
.pop-lead { color: var(--ink-2); font-size: .9375rem; }
.pop-date { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.pop-sec { margin-top: 32px; }
.pop-sec h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.pop-sec h3 .n { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
@media (max-width: 639px) {
  .pop { width: 100%; height: 100%; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .pop-head, .pop-foot { padding-left: 16px; padding-right: 16px; }
  .pop-body { padding: 16px 16px 24px; }
}
.picked button { border: none; background: none; color: var(--ink-3); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }

/* 선으로 나눈 이름/값 줄 (작가 등록 안내·작가 연락처) */
.rows { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rows > * { padding: 14px 0; border-top: 1px solid var(--line); }
.rows > *:first-child { border-top: none; }
.row-kv { display: grid; grid-template-columns: 1fr; gap: 2px; }
.row-kv dt { font-size: var(--fs-small); color: var(--ink-3); }
.row-kv dd { font-weight: 500; }
@media (min-width: 720px) { .row-kv { grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; } }

/* ---------- 작가 목록 ---------- */
.filters { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; margin-top: 32px; }
.filters .field:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .filters { grid-template-columns: repeat(3, 1fr); } .filters .field:first-child { grid-column: auto; } }
.filter-count { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; color: var(--ink-3); }
.artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; margin-top: 20px; }
@media (min-width: 720px) { .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; } }
@media (min-width: 1024px) { .artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.artist-grid > .loading { grid-column: 1 / -1; }
.artist-card { display: block; text-decoration: none; }
.artist-card .ph { aspect-ratio: 3 / 4; background: var(--tint); overflow: hidden; border-radius: var(--radius); }
.artist-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.artist-card .body { padding-top: 12px; }
.artist-card .name { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.artist-card:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.artist-card .meta { font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }
/* 태그는 테두리 없이 점으로 잇는다 */
.tags { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
.tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; color: var(--ink-2); }
.tag + .tag::before { content: "·"; margin: 0 6px; color: var(--ink-3); }
.empty { text-align: center; padding: 56px 16px; color: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 20px; }
.loading { color: var(--ink-3); padding: 40px 0; text-align: center; font-size: var(--fs-small); }

/* ---------- 작가 상세 ---------- */
.artist-head { display: grid; gap: 10px; padding-top: 24px; }
.artist-head .kind { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
.artist-head h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.25rem); line-height: 1.08; letter-spacing: -.02em; }
.artist-head .tags { margin-top: 2px; }
.artist-layout { display: grid; gap: 40px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .artist-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .artist-layout > :first-child { grid-column: 1 / 8; } .artist-layout > aside { grid-column: 9 / -1; position: sticky; top: 24px; } }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .photo-grid { gap: 12px; } }
.photo-grid button { border: none; padding: 0; background: var(--tint); overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid .no-photo { grid-column: 1 / -1; padding: 48px 16px; text-align: center; color: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; }
.contact-list a b { font-weight: 500; }
.contact-list a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.contact-list a span { color: var(--ink-3); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.side-block + .side-block { margin-top: 32px; }
.side-block h3 { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
/* 상자 대신 검정 윗선 하나로 묶는다 */
.card { border-top: 1px solid var(--ink); padding-top: 18px; }
.side-block .card h3 { font-family: var(--sans); font-size: var(--fs-row); color: var(--ink); text-transform: none; letter-spacing: 0; margin-bottom: 8px; }

/* 사진 크게 보기 — 흰 바탕에 사진만 */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(255,255,255,.98); display: flex; align-items: center; justify-content: center; padding: 64px 12px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox .lb-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.1rem; border-radius: 50%; }
.lightbox .lb-prev { left: 10px; } .lightbox .lb-next { right: 10px; }
.lightbox .lb-count { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---------- 내 예약 (my.html) ----------
   대표 2026-11-06 «신부가 바로 페이지로 사진을 보고 셀렉을 선택해서 제출 할 수 있게».
   진행 단계: 폰은 한 줄씩, 태블릿부터 다섯 칸. 지금 단계는 «지금» 글자로도 알린다 (색만으로 뜻을 전하지 않는다). */
.track { list-style: none; margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.track li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ghost); }
.track li:first-child { border-top: none; }
.track .num { font-size: var(--fs-label); margin: 0; }
.track b { font-weight: 500; letter-spacing: 0; }
.track .when { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.track li.is-done { color: var(--ink-2); }
.track li.is-cur { color: var(--ink); }
.track li.is-cur b { font-weight: 600; }
.track li.is-cur .when { color: var(--ink); }
@media (min-width: 720px) {
  .track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* 접수·확정·최종 확인·사진 고르기·보정본·앨범 (대표 2026-11-11) */
  .track li { grid-template-columns: 1fr; row-gap: 6px; border-top: none; border-left: 1px solid var(--line); padding: 16px 16px 18px; }
  .track li:first-child { border-left: none; padding-left: 0; }
  .track .when { text-align: left; min-height: 1.5em; }
}

/* 보정할 사진 고르기 — 사진을 누르면 고르고, 오른쪽 위 단추로 크게 본다. 제출 단추는 목록 바로 밑 (고정 바 없음) */
.pick-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pick-count { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pick-count b { font-weight: 600; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; margin-top: 16px; }
@media (min-width: 720px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; } }
.pick-group { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--line); }
.pick { position: relative; margin: 0; min-width: 0; }
.pick-sel { display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: none; background: var(--tint); border-radius: var(--radius); overflow: hidden; }
.pick-sel img { width: 100%; height: 100%; object-fit: cover; }
/* 고른 표시는 사진 안쪽에 — 폰 두 칸에서 옆 사진 테두리와 붙지 않게 */
.pick.on .pick-sel { outline: 3px solid var(--ink); outline-offset: -3px; }
.pick-mark { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--bg); background: rgba(17, 17, 17, .28); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none; }
.pick.on .pick-mark { background: var(--ink); border-color: var(--ink); }
.pick-zoom { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .94); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.pick-zoom:hover { border-color: var(--ink); }
.pick figcaption { margin-top: 6px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.on figcaption { color: var(--ink); }
.pick-grid.read { margin-top: 0; }
.pick-grid.read .pick-sel { outline: none; }
.pick-grid.read-open { margin-top: 12px; }
.pick-grid.read-open .pick-sel { cursor: zoom-in; }

/* 진행 페이지 (대표 2026-11-11): 제목은 이름만 굵게 / 앞으로 진행 줄 / 최종 승인·앨범 단추는 내용 바로 밑 */
.page-head h1 b { font-weight: 700; }
.page-head h1 .thin { font-weight: 300; }
#myContact { margin: 20px 0 0; }
.flow { list-style: none; border-top: 1px solid var(--ink); }
.flow li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.flow .num { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; color: var(--ink-3); grid-row: 1 / span 2; padding-top: 3px; }
.flow b { font-weight: 600; }
.flow .d { color: var(--ink-2); }
.approve-box { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.approve-note { color: var(--ink-2); margin: 0 0 10px; }
.approve-box .btn { margin-top: 10px; }
.approve-done { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 600; }
.album-act { margin-top: 24px; }
.pick-chosen { margin-top: 28px; }
.pick-chosen:empty { display: none; }
.pick-chosen ol { list-style: none; margin-top: 8px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pick-chosen li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.pick-chosen li:first-child { border-top: none; }
.pick-chosen .nm { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pick-rm { border: none; background: none; padding: 6px 2px; color: var(--ink-3); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }
.pick-rm:hover { color: var(--ink); }
.pick-send { margin-top: 20px; }
.pick-typed .field + .field { margin-top: 4px; }
/* 크게 보기에 고르기 단추 */
.lightbox.has-foot { padding-bottom: 132px; }
.lb-foot { position: absolute; left: 12px; right: 12px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lb-foot .lb-count { position: static; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lb-foot .btn { min-width: 220px; }
.lb-foot .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 작가 일정 (crew.html) — 대표 2026-11-06 «2번은 … 일단은 만들어놔보고» ---------- */
.shoot { padding: 24px 0; border-top: 1px solid var(--line); }
.shoot:first-child { border-top: none; padding-top: 0; }
.shoot-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.shoot-when b { font-size: var(--fs-title); font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.shoot-when .t { font-size: var(--fs-head); font-weight: 500; }
.shoot-when .kicker { color: var(--ink-3); }
.shoot h3 { font-size: var(--fs-head); font-weight: 600; letter-spacing: 0; margin-top: 8px; }
.shoot .spec { margin-top: 14px; border-top: 1px solid var(--line); }
.shoot .spec > div, .shoot .spec > div:first-child { padding: 12px 0; border-top: 1px solid var(--line); }
.shoot .spec > div:first-child { border-top: none; }
.shoot .spec dd { font-size: 1rem; }
.shoot .btn { margin-top: 18px; }
.shoot-ack { margin-top: 16px; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* 쉬는 날 달력 — 누르면 검정(쉼), 배정된 날은 검정 테두리(촬영)로 막는다. 글자로도 «쉼»·«촬영»을 적는다 */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-nav b { font-size: var(--fs-head); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-nav .btn:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav .btn:disabled:hover { background: var(--bg); color: var(--ink); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 520px; }
.cal .dow { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; color: var(--ink-3); text-align: center; padding: 6px 0; }
/* width: 100% — 안 주면 aspect-ratio 가 min-height 44px 에서 가로 44px 를 만들어, 칸(37px)보다 넓어진 320px 폰에서 토요일 칸이 틀 밖으로 밀렸다 (2026-11-09).
   이제 칸 폭을 채우고, 높이는 폭과 44px 중 큰 쪽 */
.cal button { aspect-ratio: 1 / 1; width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; }
.cal button:hover:not(:disabled) { border-color: var(--ink); }
.cal button .d { font-weight: 500; line-height: 1.2; }
.cal button .s { font-size: .6875rem; line-height: 1.2; min-height: 1.2em; color: var(--ink-3); }
.cal button.off { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cal button.off .s { color: var(--bg); }
.cal button.shoot { border-color: var(--ink); cursor: not-allowed; }
.cal button.shoot .s { color: var(--ink); }
.cal button.past { background: var(--tint); border-color: transparent; color: var(--ghost); cursor: default; }
.cal-list { margin-top: 6px; }

/* ---------- 글 페이지 (개인정보 처리방침) ---------- */
.doc { max-width: 760px; }
.doc h2 { font-size: 1.25rem; margin: 40px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc p, .doc li { font-size: .9375rem; color: var(--ink-2); }
.doc ul { padding-left: 20px; margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .875rem; }
.doc th, .doc td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.doc th { font-weight: 500; white-space: nowrap; color: var(--ink); }
@media (max-width: 560px) { .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; } .doc th { border-bottom: none; padding-bottom: 2px; } .doc td { border-top: none; padding-top: 2px; } }

/* ---------- 갤러리 — 예식장 이름으로 찾기 (대표 2026-11-08 «갤러리에 예식장소 넣어서 신부들이 검색할 수 있게 해줘») ----------
   갤러리 쪽과 홈 「갤러리」 칸이 같이 쓴다. 예식장 단추는 각진 테두리, 고른 것은 검정 */
.g-search { margin-top: 32px; }
.sec-main .g-search { margin-top: 0; }
.g-search label { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: 8px; }
.g-search-row { display: flex; gap: 8px; }
.g-search input { flex: 1; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--field); border-radius: var(--radius-sm); background: var(--bg); font: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; }
.g-search input::placeholder { color: #a9a8a2; }
.g-search input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.g-search .btn { flex: none; min-height: 50px; }
.g-venues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.g-v { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: inherit; font-size: .875rem; line-height: 1.4; cursor: pointer; text-decoration: none; }
.g-v:hover { border-color: var(--ink); }
.g-v .n { font-family: var(--mono); font-size: var(--fs-label); color: var(--ink-3); }
.g-v[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.g-v[aria-pressed="true"] .n { color: inherit; opacity: .7; }
.g-group { margin-top: 40px; }
.g-group-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.125rem; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.g-group-t .n { flex: none; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; color: var(--ink-3); }
.g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; margin-top: 16px; }
@media (min-width: 720px) { .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; } }
.g-grid figure { margin: 0; min-width: 0; }
.g-ph { display: block; width: 100%; padding: 0; border: none; border-radius: var(--radius); overflow: hidden; background: var(--tint); aspect-ratio: 3 / 2; cursor: zoom-in; }
.g-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-grid figcaption { margin-top: 6px; font-size: .8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.g-more { margin-top: 20px; }

/* 기본상품 — 당일 원본·24시간 보정 강조 (대표 2026-11-11). 흰 바탕·테두리 틀·왼쪽 라벨 | 오른쪽 내용 */
.edge { list-style: none; margin: 0 0 36px; padding: 0; border: 1px solid var(--ink); }
.edge li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 20px 18px; }
.edge li + li { border-top: 1px solid var(--line); }
.edge .e-k { grid-row: 1 / span 2; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
.edge .e-t { font-size: var(--fs-title); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; }
.edge .e-t .hl { font-weight: 700; }
.edge .e-d { color: var(--ink-3); font-size: .95rem; }

/* 사진 크게 보기 — 한 번 더 확대 · 한 장 내려받기 (대표 2026-11-11) */
.lightbox .lb-stage { position: absolute; inset: 56px 12px 132px; display: flex; overflow: hidden; }
.lightbox .lb-stage img { margin: auto; max-width: 100%; max-height: 100%; cursor: zoom-in; }
.lightbox.zoomed .lb-stage { overflow: auto; cursor: grab; -webkit-overflow-scrolling: touch; }
.lightbox.zoomed .lb-stage img { max-width: none; max-height: none; width: 260%; flex: none; cursor: zoom-out; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.lightbox .lb-zoom { position: absolute; top: 10px; left: 10px; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 50%; font-size: 1.3rem; line-height: 1; z-index: 2; }
.lb-foot .lb-save { background: none; border: none; padding: 4px 8px; font-size: var(--fs-label); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lb-foot .lb-save:disabled { opacity: .5; }
.lightbox.zoomed .lb-nav { opacity: .6; }

/* 보정본 수정 요청 칸 (대표 2026-11-11) */
.rv-form { margin-top: 16px; }
.rv-form[hidden] { display: none; }
.approve-box .btn-line { margin-left: 6px; }