/* FilmMood legal site - "darkroom contact sheet". Hand-written for this app only. */
:root{
  --dark:#1A120E; --bath:#2C1810; --deep:#120C09; --amber:#E8A86B; --cream:#F4D6A8;
  --safelight:#E57373; --edge:#8C6A4C; --paper:#F7EBDA; --ink:#2A1A12;
  --hole:#0B0705;
}
*{box-sizing:border-box}
html{background:var(--deep);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--cream);font:16px/1.72 "Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(229,115,115,.22),transparent 60%),
    linear-gradient(180deg,#241710 0,var(--dark) 340px,var(--deep) 100%);
  min-height:100vh}
body:lang(en){font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif}
a{color:var(--amber)} a:hover{color:var(--cream)}
.reel{max-width:980px;margin:0 auto;padding:0 18px 64px;position:relative}

/* film strip rails with sprocket holes on both sides of the masthead */
.strip{position:relative;margin:26px 0 30px;background:var(--bath);border-radius:6px;padding:44px 26px 38px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(232,168,107,.18)}
.strip::before,.strip::after{content:"";position:absolute;left:14px;right:14px;height:12px;
  background:repeating-linear-gradient(90deg,var(--hole) 0 14px,transparent 14px 30px);border-radius:2px;opacity:.95}
.strip::before{top:14px} .strip::after{bottom:14px}
.edgeprint{position:absolute;top:28px;right:30px;font:600 10px/1 "Courier New",monospace;letter-spacing:.22em;color:var(--edge);text-transform:uppercase}
.edgeprint b{color:var(--safelight);font-weight:700}
.brand{display:flex;align-items:center;gap:12px;font:700 15px/1 "Courier New",monospace;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
.brand svg{flex:none}
h1{font-size:clamp(28px,5.4vw,46px);line-height:1.15;margin:18px 0 10px;color:var(--paper);letter-spacing:-.01em}
.lede{max-width:62ch;margin:0;color:#E9C9A0}
.stamp{margin:18px 0 0;font:12px/1.5 "Courier New",monospace;color:var(--edge);letter-spacing:.06em}
.stamp b{color:var(--cream)}

/* top bar: frame-number nav + language switch */
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:22px}
.frames{display:flex;gap:6px;flex-wrap:wrap}
.frames a{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--cream);
  padding:8px 14px 8px 10px;border:1px solid rgba(232,168,107,.35);border-radius:3px;background:rgba(44,24,16,.7);font-size:14px}
.frames a i{font:normal 10px/1 "Courier New",monospace;color:var(--edge)}
.frames a[aria-current]{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.frames a[aria-current] i{color:#6B3F1E}
.lang{display:flex;border:1px solid rgba(244,214,168,.3);border-radius:999px;overflow:hidden;font:600 12px/1 "Courier New",monospace}
.lang a,.lang span{padding:8px 13px;text-decoration:none;color:var(--cream)}
.lang span{background:var(--safelight);color:var(--deep)}

/* contact sheet: each section is a printed frame */
.sheet{display:grid;gap:22px}
.frame{position:relative;background:var(--paper);color:var(--ink);border-radius:2px;padding:30px 28px 24px 70px;
  box-shadow:0 1px 0 #fff inset,0 10px 30px rgba(0,0,0,.45);transform:rotate(var(--tilt,0deg))}
.frame:nth-child(odd){--tilt:-.25deg} .frame:nth-child(3n){--tilt:.3deg}
.frame::before{content:attr(data-no);position:absolute;left:0;top:0;bottom:0;width:48px;background:var(--ink);color:var(--amber);
  font:700 12px/1 "Courier New",monospace;writing-mode:vertical-rl;text-align:center;padding-top:18px;letter-spacing:.2em}
.frame h2{margin:0 0 10px;font-size:21px;line-height:1.3;color:#5A2E14}
.frame h3{margin:18px 0 6px;font-size:16px;color:#7A3F1B}
.frame p,.frame li{color:#3B261A}
.frame ul{padding-left:20px;margin:8px 0} .frame li{margin:5px 0}
.frame a{color:#A24A2A}
.frame strong{color:#2A140A}
.grease{display:inline-block;padding:1px 8px;border:2px solid var(--safelight);border-radius:40% 55% 45% 60%;color:#9E2F2F;font-weight:700;transform:rotate(-1.5deg)}

/* developing chart table */
.chart{width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:14px}
.chart th,.chart td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px dashed #C9A985}
.chart thead th{background:var(--ink);color:var(--cream);font:700 11px/1.3 "Courier New",monospace;letter-spacing:.1em;text-transform:uppercase}
.chart tbody tr:nth-child(even){background:rgba(232,168,107,.12)}
.chart td:first-child{font-weight:700;color:#5A2E14;white-space:nowrap}

.loupe{margin:14px 0 0;padding:14px 16px;background:#2A1A12;color:var(--cream);border-left:4px solid var(--safelight);border-radius:2px}
.loupe p{color:var(--cream);margin:0}
.loupe a{color:var(--amber)}

/* support page: index print of FAQ cards */
.index{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:10px}
.index details{background:#fff7ec;border:1px solid #E2C6A2;border-radius:2px;padding:12px 14px}
.index summary{cursor:pointer;font-weight:700;color:#5A2E14;list-style:none}
.index summary::before{content:"▸ ";color:var(--safelight)}
.index details[open] summary::before{content:"▾ "}
.index p{margin:8px 0 0;font-size:14.5px}
.mailcard{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--cream);
  padding:18px 20px;border-radius:3px;margin-top:6px}
.mailcard a{font:700 17px/1.2 "Courier New",monospace;color:var(--amber);word-break:break-all}

/* home tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tile{display:block;text-decoration:none;background:var(--paper);color:var(--ink);padding:22px 20px 18px;border-radius:2px;position:relative;
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
.tile::after{content:"";position:absolute;inset:8px;border:1px solid rgba(90,46,20,.25);pointer-events:none}
.tile b{display:block;font-size:19px;color:#5A2E14} .tile span{display:block;margin-top:6px;font-size:14px;color:#4A3022}
.tile em{font:normal 11px/1 "Courier New",monospace;color:#A24A2A;letter-spacing:.14em}

footer{margin-top:40px;padding-top:16px;border-top:1px dashed rgba(232,168,107,.3);font:12px/1.6 "Courier New",monospace;color:var(--edge);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
footer a{color:var(--cream)}
@media (max-width:640px){
  .strip{padding:40px 16px 34px} .edgeprint{display:none}
  .frame{padding:24px 16px 18px 52px} .frame::before{width:36px}
  .chart thead{display:none} .chart tr{display:block;padding:6px 0;border-bottom:1px dashed #C9A985} .chart td{display:block;border:0;padding:3px 6px}
}
@media print{body{background:#fff;color:#000}.strip,.bar,.frame::before{display:none}.frame{box-shadow:none;padding-left:0;transform:none}}