/* 카메라 비주얼 아틀라스 — 스펙 3.2 토큰 기반 (밝은 배경, 파란 피사체, 옅은 회색 공간) */
.ca,.ca-ov,.ca-tray,.ca-toast{
  --page-bg:#f6f7f4; --card-bg:#ffffff; --ink:#17202b; --muted:#5f6874; --line:#dce1e7;
  --accent:#245fe5; --accent-soft:#e9efff; --scene-ground:#f2f4f7; --scene-mid:#dce1e6; --scene-far:#d8e2ff;
  --radius-card:18px; --radius-view:14px; --space-card:24px; --content-max:1440px;
  color:var(--ink);
}
.ca-hero{text-align:left}
.ca-hero__note{font-size:.8rem;color:var(--muted);margin:6px 0 0}

/* 툴바 */
.ca-toolbar{position:sticky;top:calc(var(--header-height,108px) + 0px);z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0 18px;display:flex;flex-direction:column;gap:10px}
.ca-search{width:100%;box-sizing:border-box;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;background:#fff}
.ca-search:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.ca-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ca-sel{padding:7px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;background:#fff;color:var(--ink);max-width:260px}
.ca-chk{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.ca-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ca-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.ca-chip:hover,.ca-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ca-count{font-size:12.5px;color:var(--muted);margin-left:auto}
.ca-cols button{border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;padding:4px 8px;cursor:pointer}
.ca-cols button:first-child{border-radius:8px 0 0 8px}.ca-cols button:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.ca-cols button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:860px){.ca-cols{display:none}}

/* 비교 목록 */
.ca-compare-list{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px 20px;margin-bottom:18px}
.ca-compare-list h2{font-size:1.05rem;margin:0 0 4px}
.ca-muted{color:var(--muted);font-size:13px;margin:0 0 12px}
.ca-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.ca-pair{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font:inherit;font-size:13.5px;cursor:pointer;text-align:left;color:var(--ink)}
.ca-pair:hover{border-color:var(--accent);background:var(--accent-soft)}
.ca-pair span{flex:1;min-width:0;display:flex;flex-direction:column}
.ca-pair span:last-of-type{text-align:right}
.ca-pair small{color:var(--muted);font-size:11.5px}
.ca-pair em{font-style:normal;color:var(--accent);font-weight:700}

/* 카드 그리드 */
.ca-grid{display:grid;gap:var(--space-card);grid-template-columns:repeat(2,minmax(0,1fr))}
.ca-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.ca-grid,.ca-grid.cols-3{grid-template-columns:1fr}}
.ca-card{background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column}
.ca-card[hidden]{display:none}
.ca-poster{position:relative;aspect-ratio:16/9;background:var(--scene-ground);border-bottom:1px solid var(--line)}
.ca-poster canvas{width:100%;height:100%;display:block}
.ca-poster__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted)}
.ca-poster__mode{font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.ca-poster__soon{font-size:11.5px}
.ca-poster .ca-sim{position:absolute;left:10px;top:10px;font-size:10.5px;font-weight:800;letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--muted)}
.ca-poster .ca-hudmini{position:absolute;right:10px;top:10px;font-size:11px;background:rgba(255,255,255,.9);border-radius:6px;padding:2px 7px;color:var(--ink);font-variant-numeric:tabular-nums}
.ca-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.ca-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ca-num{font-size:26px;font-weight:800;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ca-ko{font-size:24px;font-weight:800;margin:0;letter-spacing:-.02em;word-break:keep-all}
.ca-en{font-size:15px;color:var(--muted);font-weight:600}
.ca-def{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.ca-tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--muted);background:#fff}
.tag--mode{color:var(--accent);border-color:#c9d6f8;background:var(--accent-soft)}
.tag--cat{font-weight:800;color:var(--ink)}
.ca-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.ca-btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}
.ca-btn:hover{border-color:var(--ink)}
.ca-btn--p{background:var(--ink);color:#fff;border-color:var(--ink)}
.ca-btn--p:hover{background:var(--accent);border-color:var(--accent)}
.ca-btn--g{color:var(--muted)}
.ca-btn:disabled{opacity:.45;cursor:default}
.ca-btn.done{background:#e7f5ee;color:#0b7a4b;border-color:#0b7a4b}
.ca-empty{text-align:center;color:var(--muted);padding:40px 0}

/* 트레이 */
.ca-tray{position:fixed;left:0;right:0;bottom:0;z-index:9400;background:rgba(23,32,43,.96);color:#fff;padding:10px 16px}
.ca-tray__in{max-width:var(--content-max);margin:0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ca-tray__label{font-weight:800;font-size:13px}
.ca-tray__chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.ca-tray__chips span{background:#fff;color:var(--ink);border-radius:999px;padding:4px 10px;font-size:12.5px;display:flex;gap:6px;align-items:center}
.ca-tray__chips button{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0}
.ca-tray .ca-btn{border-color:#415064;color:#fff;background:transparent}
.ca-tray .ca-btn--p{background:var(--accent);border-color:var(--accent)}
.ca-tray .ca-btn--g{color:#aab4c0}

/* 오버레이 공통 */
.ca-ov{position:fixed;inset:0;z-index:9500;background:rgba(23,32,43,.5);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.ca-ov[hidden]{display:none}
.ca-sheet{background:#fff;border-radius:20px;width:100%;max-width:1040px;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative}
.ca-sheet--wide{max-width:1240px}
.ca-sheet__hd{display:flex;align-items:flex-start;gap:14px;padding:22px 26px 12px;border-bottom:1px solid var(--line)}
.ca-sheet__hd .ca-num{font-size:30px}
.ca-sheet__hd h2{font-size:28px;margin:0;letter-spacing:-.02em;font-weight:800}
.ca-sheet__hd .ca-en{font-size:16px;display:block;margin-top:2px}
.ca-sheet__x{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:10px;width:38px;height:38px;font-size:22px;cursor:pointer;line-height:1;flex:none}
.ca-sheet__bd{padding:18px 26px 26px}
.ca-view{position:relative;background:var(--scene-ground);border-radius:var(--radius-view);overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.ca-view canvas{width:100%;height:100%;display:block}
.ca-view .ca-sim{position:absolute;left:12px;top:12px;font-size:11px;font-weight:800;letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--muted)}
.ca-view .ca-hud{position:absolute;right:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ca-view .ca-hud span{font-size:12px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink);font-variant-numeric:tabular-nums}
.ca-view .ca-hud b{color:var(--accent);font-weight:800;margin-right:4px}
.ca-view .ca-nodemo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center;padding:20px}
.ca-view .ca-nodemo b{color:var(--ink)}
.ca-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.ca-ctrl input[type=range]{flex:1;min-width:160px;accent-color:var(--accent)}
.ca-ctrl .ca-time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:76px}
.ca-ctrl select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:12.5px}
.ca-vars{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 4px}
.ca-vars button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;cursor:pointer}
.ca-vars button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ca-cf{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.ca-cf span{font-size:12px;border-radius:999px;padding:3px 10px;border:1px solid var(--line)}
.ca-cf .chg{background:#fff1e6;border-color:#f0c9a6;color:#9a4d0c}
.ca-cf .fix{background:var(--accent-soft);border-color:#c9d6f8;color:#1a47ad}
.ca-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 14px;overflow-x:auto}
.ca-tabs button{border:0;background:none;padding:10px 12px;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.ca-tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.ca-pane{display:none;font-size:14.5px;line-height:1.7}
.ca-pane.on{display:block}
.ca-pane h4{font-size:13px;color:var(--muted);margin:14px 0 4px;font-weight:700;letter-spacing:.02em}
.ca-pane h4:first-child{margin-top:0}
.ca-pane p{margin:0}
.ca-pane .ca-aliases{font-size:13px;color:var(--muted)}
.ca-prompt{background:var(--page-bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.65;white-space:pre-wrap}
.ca-prompt--ko{background:#fff}
.ca-src{list-style:none;padding:0;margin:0}
.ca-src li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ca-src li a{color:var(--accent);font-weight:600;text-decoration:none}
.ca-src li small{display:block;color:var(--muted)}
.ca-related{display:flex;flex-wrap:wrap;gap:8px}
.ca-related button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.ca-related button b{display:block}
.ca-related button small{color:var(--muted)}
.ca-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ca-strip figure{margin:0}
.ca-strip canvas{width:100%;aspect-ratio:16/9;display:block;border-radius:10px;border:1px solid var(--line);background:var(--scene-ground)}
.ca-strip figcaption{font-size:12px;color:var(--muted);margin-top:4px;text-align:center}
.ca-top{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.ca-top canvas{width:100%;aspect-ratio:1;display:block;border-radius:12px;border:1px solid var(--line);background:#fff}
.ca-top .ca-legend{font-size:13px;color:var(--muted);line-height:1.7}
@media (max-width:700px){.ca-top{grid-template-columns:1fr}.ca-sheet__hd h2{font-size:22px}}

/* 비교 */
.ca-cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.ca-cmp{grid-template-columns:1fr}}
.ca-cmp__col h3{margin:10px 0 2px;font-size:18px}
.ca-cmp__col .ca-en{display:block;margin-bottom:6px}
.ca-cmp__col p{font-size:13.5px;color:var(--muted);margin:4px 0 0;line-height:1.6}
.ca-cmp__note{background:var(--accent-soft);border-radius:12px;padding:12px 16px;font-size:13.5px;margin:14px 0 0;line-height:1.6}
.ca-cmp__note b{color:var(--accent)}
.ca-lock{font-size:12px;color:var(--muted);margin-top:8px}

/* 작성기 */
.ca-comp__opts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ca-comp__opts label{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;display:flex;gap:6px;align-items:center}
.ca-warn{background:#fff6e5;border:1px solid #f3dcab;color:#7a4d00;border-radius:12px;padding:10px 14px;font-size:13px;margin:10px 0;line-height:1.6}
.ca-ok{background:#edfdf4;border:1px solid #bfe8d1;color:#0b7a4b;border-radius:12px;padding:10px 14px;font-size:13px;margin:10px 0}
.ca-comp__items{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}
.ca-comp__items div{font-size:13.5px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;gap:8px;align-items:center}
.ca-comp__items b{min-width:120px}
.ca-comp__items small{color:var(--muted);flex:1}

.ca-toast{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:9600;background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font-size:13px;white-space:nowrap}
.ca-toast[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.ca-sheet{transition:none}}

/* 하단 설명 블록: 다른 도구 페이지(.kthg)와 동일 템플릿 */
.kthg { max-width: 820px; margin: 40px auto 10px; padding-top: 8px; }
.kthg h2 { font-size: 1.05rem; margin: 26px 0 10px; color: var(--color-text, #222); }
.kthg p, .kthg li { font-size: .87rem; line-height: 1.7; color: var(--color-text-light, #4b5563); }
.kthg ol, .kthg ul { padding-left: 20px; margin: 8px 0; }
.kthg dt { font-weight: 700; font-size: .88rem; margin-top: 14px; color: var(--color-text, #222); }
.kthg dd { margin: 4px 0 0; font-size: .85rem; color: var(--color-text-light, #4b5563); line-height: 1.65; }