/**
 * assets/css/preview.css — 데모 미리보기 뷰어 (/templates/{code}/preview)
 *
 * base.css 를 함께 로드하므로 여기에는 이 화면 전용 클래스만 둔다.
 * 색은 base.css 의 :root 토큰만 쓴다 — 이 파일에 색을 직접 적지 않는다.
 *
 * 기기 전환은 CSS 만으로 한다(라디오 + label). 폭만 바꾸므로 iframe 은 다시
 * 로드되지 않는다 — JS 로 src 나 크기를 갈아 끼우면 보던 위치가 맨 위로 돌아간다.
 *
 * @version 1.1.0 (2026-08-10) 토큰 이름을 base.css 한 벌(--color-… · --radius-…)로 맞췄다. 값은 그대로다
 * @version 1.0.0 (2026-08-09)
 */

.standalone-body { background: var(--color-bg-soft); }

/* 라디오는 화면에서 감추되 **포커스는 받게** 둔다(display:none 이면 키보드로 못 고른다) */
.pv-radio {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}

/* 바 / 무대 / 안내 3단. dvh 를 쓰는 것은 모바일 주소창이 접힐 때 높이가 튀지 않게 하기 위함 */
.pv {
    display: grid; grid-template-rows: auto 1fr auto;
    height: 100vh; height: 100dvh; overflow: hidden;
}

/* ── 상단 바 ───────────────────────────────────────────────────────────── */
.pv-bar {
    display: flex; align-items: center; gap: 14px;
    height: 56px; padding: 0 14px;
    background: var(--color-primary-dark); color: var(--color-mint);
}
.pv-bar__left,
.pv-bar__right { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.pv-bar__right { justify-content: flex-end; }

.pv-bar a { color: var(--color-bg-soft); }
.pv-bar a:hover { color: var(--color-bg); text-decoration: none; }

.pv-back { font-size: 14px; font-weight: 600; white-space: nowrap; }

.pv-chip {
    flex: none; padding: 3px 9px; border-radius: 2px;
    background: var(--color-primary); color: var(--color-bg);
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pv-name { color: var(--color-bg); font-size: 15px; white-space: nowrap; }
/* 태그라인은 길면 잘린다 — 이름·기기 버튼을 밀어내면 안 된다 */
.pv-tagline {
    font-size: 13px; color: var(--color-mint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.pv-open { font-size: 13px; white-space: nowrap; }

/* ── 기기 선택 ─────────────────────────────────────────────────────────── */
.pv-devices {
    flex: none; display: flex; gap: 2px;
    padding: 3px; border-radius: 3px; background: var(--color-primary);
}
.pv-devices label {
    padding: 6px 16px; border-radius: 2px;
    font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
    color: var(--color-bg); white-space: nowrap; cursor: pointer;
}
.pv-devices label:hover { background: var(--color-primary-dark); }

#pv-pc:checked     ~ .pv label[for="pv-pc"],
#pv-tablet:checked ~ .pv label[for="pv-tablet"],
#pv-mobile:checked ~ .pv label[for="pv-mobile"] {
    background: var(--color-bg); color: var(--color-primary-dark);
}

/* 라디오가 숨겨져 있으므로 초점 표시를 버튼 묶음에 대신 그린다 */
.pv-radio:focus-visible ~ .pv .pv-devices { outline: 2px solid var(--color-bg); outline-offset: 2px; }

/* ── 무대 ──────────────────────────────────────────────────────────────── */
.pv-stage { display: flex; justify-content: center; min-height: 0; background: var(--color-bg-soft); }

.pv-device { width: 100%; height: 100%; background: var(--color-bg); }
.pv-frame  { display: block; width: 100%; height: 100%; border: 0; }

/* 좁은 기기 폭에서는 좌우에 선을 그어 「여기까지가 화면」임을 보인다.
   그림자를 쓰지 않는 것은 base.css 금지 2번 때문이다. */
#pv-tablet:checked ~ .pv .pv-stage,
#pv-mobile:checked ~ .pv .pv-stage { padding: 16px 0; }

#pv-tablet:checked ~ .pv .pv-device,
#pv-mobile:checked ~ .pv .pv-device {
    border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden;
}
#pv-tablet:checked ~ .pv .pv-device { width: 834px; max-width: 100%; }
#pv-mobile:checked ~ .pv .pv-device { width: 390px; max-width: 100%; }

/* ── 안내 ──────────────────────────────────────────────────────────────── */
.pv-note {
    margin: 0; padding: 7px 14px;
    background: var(--color-bg); border-top: 1px solid var(--color-border);
    font-size: 12.5px; color: var(--color-text-light); text-align: center;
}
.pv-note a { color: var(--color-primary); font-weight: 600; }

/* ── 좁은 화면 ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pv-tagline, .pv-name { display: none; }
    .pv-devices label { padding: 6px 11px; font-size: 12.5px; }
}

@media (max-width: 620px) {
    .pv-bar { height: 50px; gap: 8px; padding: 0 10px; }
    .pv-back__text, .pv-chip, .pv-open { display: none; }
    .pv-devices label { padding: 6px 9px; font-size: 12px; }
    /* 좁은 화면에서 태블릿 폭은 어차피 화면을 다 쓴다 — 여백만 버린다 */
    #pv-tablet:checked ~ .pv .pv-stage { padding: 0; }
    #pv-tablet:checked ~ .pv .pv-device { border: 0; }
}