/* ==========================================================================
   최박사사진관 · Dr. Choi Photo Studio — design system
   Modern studio: seamless-backdrop white, print white, ink, and one accent —
   the darkroom safelight red (REC dot, 원본 seal, primary action only).
   Crop marks frame photos and key blocks instead of rounded card borders.
   Hashes, certificate IDs and metadata are set in mono: the hash IS the product.
   ========================================================================== */

:root{
  --paper:#F4F4F1;          /* seamless backdrop white (page ground) */
  --surface:#FFFFFF;        /* print white (raised surfaces) */
  --ink:#0F0F0E;
  --ink-2:#2A2A28;
  --graphite:#5C5C58;       /* secondary text */
  --hair:#D6D6CF;           /* hairline borders */
  --hair-2:#E7E7E1;         /* subtle dividers, tints */
  --accent:#C8321D;         /* darkroom safelight red */
  --accent-ink:#FFFFFF;
  --ok:#1E7A4B;  --ok-bg:#E6F2EA;   /* semantic: 원본 일치 */
  --bad:#A8341F; --bad-bg:#F8E8E4;  /* semantic: 불일치 */
  --warn:#7A5200; --warn-bg:#FBF0D8;/* semantic: 주의 */
  --shadow:0 1px 0 rgba(15,15,14,.04),0 22px 44px -22px rgba(15,15,14,.22);
  --radius:2px;
  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Pretendard Variable','Pretendard','Apple SD Gothic Neo','Malgun Gothic',monospace;
  --maxw:1120px;
  --gut:clamp(16px,4vw,40px);
  --t-xs:12.5px; --t-sm:14px; --t-base:16px; --t-md:18px; --t-lg:22px;
  --t-xl:clamp(24px,3.2vw,30px); --t-2xl:clamp(30px,4.6vw,46px); --t-3xl:clamp(38px,7vw,74px);
  --crop:var(--ink);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E0E0D; --surface:#171716; --ink:#EDEDE8; --ink-2:#D2D2CC; --graphite:#9C9C96;
    --hair:#2E2E2B; --hair-2:#222220; --accent:#E24A33; --accent-ink:#0E0E0D;
    --ok:#4DBA82; --ok-bg:#122A1E; --bad:#F07C64; --bad-bg:#301612; --warn:#E3AE45; --warn-bg:#2B2211;
    --shadow:0 22px 44px -22px rgba(0,0,0,.7); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E0E0D; --surface:#171716; --ink:#EDEDE8; --ink-2:#D2D2CC; --graphite:#9C9C96;
  --hair:#2E2E2B; --hair-2:#222220; --accent:#E24A33; --accent-ink:#0E0E0D;
  --ok:#4DBA82; --ok-bg:#122A1E; --bad:#F07C64; --bad-bg:#301612; --warn:#E3AE45; --warn-bg:#2B2211;
  --shadow:0 22px 44px -22px rgba(0,0,0,.7); color-scheme:dark;
}
:root[data-theme="light"]{
  --paper:#F4F4F1; --surface:#FFFFFF; --ink:#0F0F0E; --ink-2:#2A2A28; --graphite:#5C5C58;
  --hair:#D6D6CF; --hair-2:#E7E7E1; --accent:#C8321D; --accent-ink:#FFFFFF;
  --ok:#1E7A4B; --ok-bg:#E6F2EA; --bad:#A8341F; --bad-bg:#F8E8E4; --warn:#7A5200; --warn-bg:#FBF0D8;
  --shadow:0 1px 0 rgba(15,15,14,.04),0 22px 44px -22px rgba(15,15,14,.22); color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:var(--t-base);
  line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; word-break:keep-all; overflow-wrap:break-word; }
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--ink); text-decoration-thickness:2px; }
h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.025em; text-wrap:balance; font-weight:800; }
p{ margin:0; }
p+p{ margin-top:.9em; }
ul,ol{ margin:0; padding-left:1.2em; }
hr{ border:0; border-top:1px solid var(--hair); margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--ink); color:var(--paper); }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--paper); padding:8px 14px; }
.skip:focus{ left:8px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:760px; }
.section{ padding-block:clamp(56px,9vw,112px); }
.section.tight{ padding-block:clamp(40px,6vw,72px); }
.section+.section{ border-top:1px solid var(--hair); }
.stack>*+*{ margin-top:var(--s,16px); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--g,12px); align-items:center; }
.grid{ display:grid; gap:var(--g,24px); grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); }
.grid-2{ --cols:2; } .grid-3{ --cols:3; } .grid-4{ --cols:4; }
.split{ display:grid; gap:clamp(28px,5vw,64px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; }
@media (max-width:900px){ .grid-4{ --cols:2; } .grid-3{ --cols:2; } }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid,.grid-2,.grid-3,.grid-4{ --cols:1; } }

/* ---------- type ---------- */
.eyebrow{ font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); }
.eyebrow .dot,.rec{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); vertical-align:middle; margin-right:8px; transform:translateY(-1px); }
.display{ font-size:var(--t-3xl); font-weight:800; letter-spacing:-.045em; line-height:1.06; }
.h2{ font-size:var(--t-2xl); letter-spacing:-.035em; }
.h3{ font-size:var(--t-lg); letter-spacing:-.02em; }
.lead{ font-size:clamp(17px,2vw,20px); line-height:1.65; color:var(--ink-2); max-width:62ch; }
.body{ max-width:65ch; }
.muted{ color:var(--graphite); }
.small{ font-size:var(--t-sm); }
.xs{ font-size:var(--t-xs); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num{ font-variant-numeric:tabular-nums; }
.hash{ font-family:var(--mono); font-size:13px; line-height:1.55; letter-spacing:.02em; word-break:break-all; overflow-wrap:anywhere; color:var(--ink-2); }
.hl{ color:var(--accent); }

/* ---------- header ---------- */
.site-head{ position:sticky; top:0; z-index:50; background:var(--paper);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--hair); }
/* A declaration that contains var() is only checked at computed-value time, so a plain
   "fallback first" pair would still end up transparent where color-mix() is unsupported. */
@supports (background:color-mix(in srgb,red 50%,transparent)){
  .site-head{ background:color-mix(in srgb,var(--paper) 88%,transparent); }
}
.head-in{ display:flex; align-items:center; gap:clamp(12px,3vw,32px); min-height:64px; }
.logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.logo:hover{ color:var(--ink); }
.logo .mark{ width:26px; height:26px; color:var(--ink); }
.logo .wm{ font-weight:800; font-size:18px; letter-spacing:-.03em; }
.logo .wm small{ display:block; font-family:var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.16em; color:var(--graphite); margin-top:1px; }
.nav{ display:flex; gap:clamp(12px,2.4vw,28px); margin-left:auto; flex-wrap:wrap; }
.nav a{ text-decoration:none; font-size:var(--t-sm); font-weight:600; color:var(--graphite); padding-block:6px; border-bottom:1.5px solid transparent; }
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }
.head-cta{ flex:0 0 auto; }
@media (max-width:720px){
  .site-head{ position:static; }
  .head-in{ flex-wrap:wrap; row-gap:4px; padding-block:10px; }
  .nav{ order:3; width:100%; margin-left:0; gap:18px; }
  .nav a{ padding-block:11px; }
  .head-cta{ margin-left:auto; }
  .logo .wm small{ display:none; }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px;
  font:inherit; font-size:var(--t-sm); font-weight:700; letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--ink); border-radius:var(--radius); background:transparent; color:var(--ink);
  transition:background .15s,color .15s,border-color .15s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--ink-2); border-color:var(--ink-2); color:var(--paper); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn-sm{ min-height:36px; padding:6px 14px; font-size:var(--t-xs); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.link-arrow{ font-weight:700; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:1px; }
.link-arrow:hover{ border-bottom-width:2.5px; padding-bottom:0; }
.link-arrow::after{ content:" →"; }

/* ---------- crop-mark frame (signature device) ---------- */
.frame{ position:relative; padding:var(--fp,16px); }
.frame::before{ content:""; position:absolute; inset:0; pointer-events:none;
  --cl:14px; --cw:1.5px;
  background:
    linear-gradient(var(--crop),var(--crop)) left top/var(--cl) var(--cw) no-repeat,
    linear-gradient(var(--crop),var(--crop)) left top/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--crop),var(--crop)) right top/var(--cl) var(--cw) no-repeat,
    linear-gradient(var(--crop),var(--crop)) right top/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--crop),var(--crop)) left bottom/var(--cl) var(--cw) no-repeat,
    linear-gradient(var(--crop),var(--crop)) left bottom/var(--cw) var(--cl) no-repeat,
    linear-gradient(var(--crop),var(--crop)) right bottom/var(--cl) var(--cw) no-repeat,
    linear-gradient(var(--crop),var(--crop)) right bottom/var(--cw) var(--cl) no-repeat; }
.frame>img{ width:100%; }
.caption{ font-family:var(--mono); font-size:var(--t-xs); color:var(--graphite); letter-spacing:.04em; margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 14px; }

/* ---------- surfaces ---------- */
.panel{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:clamp(20px,3vw,32px); }
.panel.raised{ box-shadow:var(--shadow); }
.tile{ border-top:1.5px solid var(--ink); padding-top:18px; }
.tile h3{ font-size:var(--t-md); margin-bottom:8px; }
.tile p{ color:var(--graphite); font-size:var(--t-sm); line-height:1.7; }
.tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border:1px solid var(--hair); border-radius:var(--radius); color:var(--graphite); background:var(--surface); }
.status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border:1px solid var(--ink); border-radius:999px; }
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:rec 1.8s ease-in-out infinite; }
@keyframes rec{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---------- ordered process (a real sequence) ---------- */
.steps{ list-style:none; padding:0; margin:0; counter-reset:st; display:grid; gap:0; }
.steps>li{ counter-increment:st; display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; padding:22px 0; border-top:1px solid var(--hair); }
.steps>li:last-child{ border-bottom:1px solid var(--hair); }
.steps>li::before{ content:counter(st,decimal-leading-zero); font-family:var(--mono); font-size:var(--t-sm); font-weight:600; color:var(--ink); padding-top:3px; }
.steps h3{ font-size:var(--t-md); margin-bottom:6px; }
.steps p{ color:var(--graphite); font-size:var(--t-sm); }

/* ---------- 원본 seal ---------- */
.seal{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:var(--t-sm); color:var(--accent);
  border:1.5px solid var(--accent); border-radius:var(--radius); padding:5px 10px; letter-spacing:-.01em; }
.seal::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid currentColor;
  background:radial-gradient(circle,currentColor 0 3px,transparent 3.5px); }

/* ---------- key-value list (certificate data, specs) ---------- */
.kv{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:10px 22px; margin:0; }
.kv dt{ font-family:var(--mono); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); padding-top:2px; }
.kv dd{ margin:0; font-size:var(--t-sm); font-weight:600; min-width:0; }
@media (max-width:480px){ .kv{ grid-template-columns:1fr; gap:2px 0; } .kv dd{ margin-bottom:10px; } }

/* ---------- price table ---------- */
.price{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.price th,.price td{ text-align:left; padding:16px 0; border-top:1px solid var(--hair); vertical-align:top; }
.price tr:last-child td{ border-bottom:1px solid var(--hair); }
.price th{ font-family:var(--mono); font-size:var(--t-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--graphite); padding-top:0; border-top:0; }
.price td.amt{ text-align:right; font-weight:800; white-space:nowrap; padding-left:16px; }
.price td small{ display:block; color:var(--graphite); font-weight:500; font-size:var(--t-xs); margin-top:2px; }
.table-wrap{ overflow-x:auto; }

/* ---------- notices ---------- */
.notice{ border-left:3px solid var(--ink); background:var(--surface); padding:16px 18px; font-size:var(--t-sm); color:var(--ink-2); }
.notice.warn{ border-left-color:var(--warn); background:var(--warn-bg); }
.notice.ok{ border-left-color:var(--ok); background:var(--ok-bg); }
.notice strong{ color:var(--ink); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--hair); }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative; font-weight:700; font-size:var(--t-md); letter-spacing:-.015em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:16px; font-family:var(--mono); font-size:22px; font-weight:400; color:var(--graphite); }
.faq details[open] summary::after{ content:"−"; }
.faq .ans{ padding:0 0 22px; color:var(--graphite); font-size:var(--t-sm); max-width:68ch; }

/* ---------- verify tool ---------- */
.drop{ position:relative; display:grid; place-items:center; text-align:center; min-height:220px; padding:28px;
  background:var(--surface); border:1.5px dashed var(--graphite); border-radius:var(--radius); cursor:pointer; transition:border-color .15s,background .15s; }
.drop:hover,.drop.is-over{ border-color:var(--ink); }
.drop.is-over{ background:var(--hair-2); }
.drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.result{ border:1.5px solid var(--hair); border-radius:var(--radius); background:var(--surface); padding:clamp(18px,3vw,28px); }
.result.is-ok{ border-color:var(--ok); }
.result.is-ok .result-title{ color:var(--ok); }
.result.is-ok .seal{ color:var(--ok); border-color:var(--ok); }
.result.is-bad{ border-color:var(--bad); }
.result.is-bad .result-title{ color:var(--bad); }
.result-title{ font-size:var(--t-xl); font-weight:800; letter-spacing:-.03em; display:flex; align-items:center; gap:10px; }
.field{ display:grid; gap:6px; }
.field label{ font-size:var(--t-xs); font-weight:700; color:var(--graphite); }
.input{ font:inherit; font-family:var(--mono); font-size:15px; min-height:44px; padding:10px 12px; background:var(--surface); color:var(--ink);
  border:1.5px solid var(--graphite); border-radius:var(--radius); width:100%; }
.input:focus-visible{ border-color:var(--accent); outline:none; box-shadow:0 0 0 1px var(--accent); }
@supports (color:color-mix(in srgb,red 50%,transparent)){
  .input:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
}
.progress{ height:3px; background:var(--hair-2); overflow:hidden; }
.progress>i{ display:block; height:100%; width:40%; background:var(--ink); animation:scan 1s linear infinite; }
@keyframes scan{ from{ transform:translateX(-100%); } to{ transform:translateX(260%); } }

/* ---------- certificate ---------- */
.cert{ background:var(--surface); color:var(--ink); border:1px solid var(--hair); padding:clamp(24px,5vw,56px); position:relative; }
.cert-head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; padding-bottom:22px; border-bottom:1.5px solid var(--ink); }
.cert-title{ font-size:var(--t-2xl); letter-spacing:-.04em; }
.cert-id{ font-family:var(--mono); font-size:var(--t-md); font-weight:600; letter-spacing:.04em; }
.cert-foot{ margin-top:26px; padding-top:16px; border-top:1px solid var(--hair); font-size:var(--t-xs); color:var(--graphite); }

/* ---------- footer ---------- */
.site-foot{ border-top:1px solid var(--hair); padding-block:48px 56px; font-size:var(--t-sm); color:var(--graphite); }
.foot-in{ display:grid; gap:28px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); }
.site-foot .logo{ margin-bottom:12px; }
.site-foot h4{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite); margin-bottom:10px; }
.site-foot ul{ list-style:none; padding:0; display:grid; gap:6px; }
.site-foot a{ text-decoration:none; }
.site-foot a:hover{ color:var(--ink); }
.fine{ grid-column:1/-1; font-size:var(--t-xs); border-top:1px solid var(--hair); padding-top:18px; display:flex; flex-wrap:wrap; gap:6px 18px; }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr; } }

/* ---------- motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media print{
  .site-head,.site-foot,.no-print{ display:none!important; }
  body{ background:#fff; color:#000; }
  .cert{ border:0; padding:0; }
}