/* ============================================================================
   종이 카드 1:1 비교 보기 — 왼쪽 사진 고정 · 오른쪽 내용 스크롤
   ============================================================================
   종이 카드와 우리 자료를 한 줄씩 맞춰 보려면 둘이 같이 보여야 한다. 예전에는
   사진을 누르면 전체를 덮는 창이 떠서, 사진을 보려면 자료가 가려지고 자료를
   보려면 창을 닫아야 했다. 번갈아 여닫으며 눈으로 외워 옮기는 셈이었다.

   자리를 옮기지 않는다. 있던 자리에서 왼쪽 칸만 열린다(2안). 사진을 여러 장
   연달아 넘겨 볼 때 화면이 매번 출렁이지 않아야 한다.
   ========================================================================== */

/* 사이드바 자리는 비워 둔다 (한울 그린은 PC 에서 늘 108px) */
.scc{position:fixed;top:0;right:0;bottom:0;left:108px;z-index:80;background:var(--bg);
     display:grid;grid-template-rows:auto 1fr}
.scc-open{overflow:hidden}

.scc-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--surface);
         border-bottom:1px solid var(--line);flex-wrap:wrap}
.scc-bar b{font-size:.95rem;font-weight:900}
.scc-bar .scc-when{font-size:.82rem;color:var(--ink-soft)}
.scc-bar .scc-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.scc button{font:inherit;font-weight:800;font-size:.85rem;border:1px solid var(--line);
            background:var(--bg);color:var(--ink);border-radius:9px;padding:7px 12px;cursor:pointer}
.scc button:hover{border-color:var(--accent)}
.scc button.scc-sq{padding:7px 11px;min-width:38px}

.scc-panes{display:grid;grid-template-columns:var(--scc-w,52%) 8px 1fr;min-height:0}
.scc-left{position:relative;overflow:hidden;background:var(--surface-3,var(--surface));
          display:grid;place-items:center}
.scc-left img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;
              cursor:grab;user-select:none;-webkit-user-drag:none}
.scc-left img.scc-hold{cursor:grabbing}
.scc-loading{position:absolute;font-size:.85rem;color:var(--ink-soft)}
.scc-zoom{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;background:var(--surface);
          border:1px solid var(--line);border-radius:10px;padding:5px}
.scc-page{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;align-items:center;
          background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px;
          font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums}

/* 가운데 손잡이 — 얇아서 잡기 어려우면 안 쓰게 된다. 눈에 보이는 것보다 넓게 잡는다 */
.scc-grip{cursor:col-resize;background:var(--line);position:relative}
.scc-grip::after{content:"";position:absolute;inset:0 -6px}
.scc-grip:hover{background:var(--accent)}

.scc-rightpane{overflow-y:auto;min-height:0;padding:14px 20px 60px}
.scc-hint{font-size:.78rem;color:var(--ink-soft);padding:0 2px 10px}

/* 2안 — 자리를 옮기지 않고 그 자리에서 열린다 */
@keyframes scc-in{from{opacity:0}to{opacity:1}}
@keyframes scc-photo{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.scc[data-anim]{animation:scc-in .16s ease}
.scc[data-anim] .scc-left img{animation:scc-photo .26s cubic-bezier(.22,.61,.36,1)}

/* 움직임을 줄여 달라고 한 사람에게는 바로 바뀐다 */
@media (prefers-reduced-motion:reduce){
  .scc[data-anim],.scc[data-anim] .scc-left img{animation:none}
}

/* 폰 — 좌우로 나누면 둘 다 못 읽는다. 위아래로 나누고 사진이 위에 붙는다 */
@media (max-width:768px){
  .scc{left:0;top:52px}
  .scc-panes{grid-template-columns:1fr;grid-template-rows:var(--scc-h,40vh) 8px 1fr}
  .scc-grip{cursor:row-resize}
  .scc-rightpane{padding:12px 14px 60px}
  .scc-bar{flex-wrap:nowrap;padding:7px 10px;gap:7px}
  .scc-bar .scc-when{display:none}
  .scc button{padding:6px 10px;font-size:.8rem}
  .scc-zoom,.scc-page{padding:3px;bottom:8px}
  .scc-zoom button,.scc-page button{padding:5px 8px;min-width:32px}
}

/* 인쇄는 원래 모돈카드만 나간다 */
@media print{ .scc{display:none !important} }