/* 촬영 시뮬레이터. 색·간격·글꼴은 사이트 토큰(/design.css)과 놀이터 키트(--tp-*)를 쓴다 — 다크 모드가 한 곳에서 바뀐다.
 * 3D 장면과 폰 화면 자체는 「밝은 체육관」 그대로 둔다(film3d.js 머리말). 둘레 UI 만 테마를 따른다.
 * 누르는 것은 모두 44px 이상(WCAG 2.5.5 권장), 포커스는 사이트 공통 --focus 고리. */
.tfSim{margin:var(--sp-4) 0 var(--sp-6)}
.tfSim [hidden]{display:none!important}
.tfStage{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-3)}
.tfStage:not(.tfOn) .tfStillFig{margin:0}
.tfStillFig img,.tfStill{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;border-radius:var(--r);background:#efe2d2}
.tfStillFig figcaption{font-size:var(--fs-sm);color:var(--dim);margin:var(--sp-2) 0 0}
.tfGrid{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
@media (max-width:899px){.tfGrid{grid-template-columns:minmax(0,1fr)}}
.tfMain{position:relative}
.tfCanvas{display:block;width:100%;aspect-ratio:8/5;border-radius:var(--r);touch-action:none;background:#f4ede6;cursor:grab}
.tfCanvas:active{cursor:grabbing}
.tfCanvas:focus-visible,.tfStage button:focus-visible,.tfStage input:focus-visible,.tfStage select:focus-visible,.tfStage summary:focus-visible,.tfPresetBtn:focus-visible{outline:none;box-shadow:var(--focus)}
.tfNote{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--dim)}
.tfNote:empty{display:none}
.tfHelp{font-size:var(--fs-sm);color:var(--dim);margin:var(--sp-2) 0 0;line-height:1.6}
.tfViews{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0 0}
.tfStage:not(.tf3d) .tfViews,.tfStage:not(.tf3d) .tfHelp{display:none}
.tfChip,.tfStepBtn{min-height:44px;padding:8px 14px;border:2px solid var(--border-2,var(--border));border-radius:var(--r-full);background:var(--surface);color:var(--text);font:inherit;font-weight:var(--fw-semibold);font-size:var(--fs-md);cursor:pointer}
.tfChip:hover,.tfStepBtn:hover{border-color:var(--accent)}
.tfH{display:block;font-weight:var(--fw-bold);font-size:var(--fs-md);margin:0 0 var(--sp-2)}
.tfDim{color:var(--dim);font-size:var(--fs-sm)}
.tfPhoneBox{margin:0}
.tfPhone{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;border:6px solid #2a2326;background:#1a1617;overflow:hidden;box-shadow:var(--shadow)}
.tfPhone.port{aspect-ratio:9/16;width:min(100%,220px);margin:0 auto}
.tfPhoneCanvas,.tfOverlay{position:absolute;inset:0;width:100%;height:100%;display:block}
.tfStage:not(.tf3d) .tfPhoneCanvas{display:none}
.tfPhone.tfPulse{animation:tfPulse 1.4s ease-in-out 2}
@keyframes tfPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--tp-sun) 70%,transparent)}}
.tfBall{font-size:var(--fs-sm);color:var(--dim);margin:var(--sp-2) 0 0}
.tfScore{margin:var(--sp-4) 0 0;border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);background:var(--surface-2,var(--surface))}
.tfScoreHead{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.tfScoreHead .tfH{margin:0}
.tfScoreRow{display:flex;gap:var(--sp-3);align-items:center;margin:var(--sp-2) 0}
.tfScoreNum{font-size:44px;line-height:1;font-weight:var(--fw-black);min-width:2.2ch;color:var(--accent-text)}
.tfScore[data-grade=great] .tfScoreNum{color:var(--ok)}
.tfScore[data-grade=bad] .tfScoreNum{color:var(--err)}
.tfGrade{display:block;font-weight:var(--fw-bold);font-size:var(--fs-lg)}
.tfEngine{display:inline-block;margin-top:4px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:2px 10px;border-radius:var(--r-full);background:var(--ok-bg);color:var(--ok)}
.tfEngine[data-engine=limited]{background:var(--warn-bg);color:var(--warn)}
.tfEngine[data-engine=none]{background:var(--err-bg);color:var(--err)}
.tfChecks{list-style:none;padding:0;margin:var(--sp-2) 0 0;display:grid;gap:var(--sp-2)}
.tfChecks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 8px;font-size:var(--fs-sm);line-height:1.55}
.tfChecks .tfCk b{display:block;font-size:var(--fs-sm)}
.tfChecks .tfBasis{grid-column:2;justify-self:start;font-size:var(--fs-2xs);padding:0 8px;border-radius:var(--r-full);border:1px solid var(--border);color:var(--dim)}
.tfChecks .tfBasis[data-b=measured]{border-color:var(--ok);color:var(--ok)}
.tfIcon{width:16px;height:16px;border-radius:50%;margin-top:3px;background:var(--ok-fill)}
li[data-s=warn] .tfIcon{background:var(--warn-fill)}
li[data-s=bad] .tfIcon{background:var(--err-fill);border-radius:3px}
li[data-s=good] .tfCk span{color:var(--dim)}
.tfGoodWrap{display:block!important}
.tfGood summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:var(--fw-semibold);color:var(--dim)}
.tfAllGood{align-items:center}
.tfSr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tfSteps{margin:0 0 var(--sp-3)}
.tfStepRow{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tfStepBtn{display:inline-flex;align-items:center;gap:8px}
.tfStepBtn .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tp-ball);border:2px solid var(--tp-ink);color:#2a2326;font-size:var(--fs-xs);font-weight:var(--fw-black)}
.tfStepBtn[aria-current=step]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg)}
.tfStepCap{margin:var(--sp-2) 0;font-size:var(--fs-md);line-height:1.65;min-height:1.65em}
.tfStepCap:empty{display:none}
.tfStepNav{display:flex;gap:var(--sp-2)}
.tfPresetRow{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.tfPresetRow .tfChip[aria-pressed=true]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg)}
@media (max-width:640px){
  .tfStepRow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .tfStepBtn{padding:6px 10px;font-size:var(--fs-sm);border-radius:var(--r-lg);text-align:left;line-height:1.3}
  .tfChip{padding:6px 12px;font-size:var(--fs-sm)}
  .tfStage{padding:var(--sp-2)}
}
.tfStepNav .btn,.tfMain .btn{min-height:44px}
.tfControls{margin:var(--sp-4) 0 0;border-top:1px solid var(--border);padding-top:var(--sp-3)}
.tfControls summary{min-height:44px;display:flex;align-items:center;font-weight:var(--fw-bold);cursor:pointer}
.tfCtlGrid{display:grid;gap:var(--sp-3) var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:var(--sp-2)}
.tfRange{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;font-size:var(--fs-sm)}
.tfRange label{grid-column:1}
.tfRange output{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;color:var(--dim)}
.tfRange input,.tfRange select{grid-column:1/-1;width:100%;min-height:44px;accent-color:var(--accent)}
.tfRange select{border:1px solid var(--border-input);border-radius:var(--r);background:var(--surface);color:var(--text);padding:0 10px;font:inherit}
.tfCheck{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);min-height:44px}
.tfCheck input{width:22px;height:22px;accent-color:var(--accent)}
.tfSeg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-sm)}
.tfSeg legend{width:100%;padding:0;margin:0 0 4px}
.tfSeg label{position:relative}
.tfSeg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tfSeg span{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--border);border-radius:var(--r-full);background:var(--surface)}
.tfSeg input:checked+span{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg);font-weight:var(--fw-semibold)}
.tfSeg input:focus-visible+span{box-shadow:var(--focus)}
.tfSeg input:disabled+span{opacity:.45}
/* 추천 자리 */
.tfPresets{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tfPreset{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--sp-3) var(--sp-4);display:grid;gap:6px;align-content:start}
.tfPresetBtn{min-height:44px;width:100%;text-align:left;border:2px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;font-weight:var(--fw-bold);padding:8px 12px;cursor:pointer}
.tfPresetBtn:hover{border-color:var(--accent)}
.tfPresetBtn[aria-pressed=true]{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-fg)}
.tfStage:not(.tfOn)~.tfPresets .tfPresetBtn{cursor:default}
.tfTags{display:flex;flex-wrap:wrap;gap:4px}
.tfTag{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);padding:1px 8px;border-radius:var(--r-full);background:var(--surface-2,var(--surface));border:1px solid var(--border);color:var(--dim)}
.tfTag[data-t=live]{border-color:var(--accent);color:var(--accent-text)}
.tfTag[data-t=record]{border-color:var(--ok);color:var(--ok)}
.tfTag[data-t=video]{border-color:var(--err);color:var(--err)}
.tfTag[data-t=measured]{border-color:var(--ok);color:var(--ok)}
.tfTag[data-t=code]{border-color:var(--accent);color:var(--accent-text)}
.tfPreset p{margin:0;font-size:var(--fs-sm);line-height:1.6}
.tfPreset .pro::before{content:"+ ";font-weight:800;color:var(--ok)}
.tfPreset .con::before{content:"− ";font-weight:800;color:var(--err)}
.tfPreset .meta{color:var(--dim);font-size:var(--fs-xs)}
/* 두 가지 쓰는 법 */
.tfWays{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:var(--sp-3) 0}
.tfWay{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);background:var(--surface)}
.tfWay h3{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
.tfWay ol,.tfWay ul{margin:0 0 var(--sp-2);padding-left:var(--sp-5)}
.tfWay li{margin:0 0 4px;font-size:var(--fs-md)}
.tfSoon{display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:2px 10px;border-radius:var(--r-full);background:var(--warn-bg);color:var(--warn);margin-left:6px;vertical-align:2px}
.tfFlow{list-style:none;padding:0;margin:var(--sp-3) 0;display:grid;gap:var(--sp-2)}
.tfFlow li{border-left:4px solid var(--accent);background:var(--accent-bg);color:var(--accent-fg);border-radius:0 var(--r) var(--r) 0;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-md)}
.tfFlow b{color:inherit}
@media (prefers-reduced-motion:reduce){.tfPhone.tfPulse{animation:none}}