/* ===========================================================================
한마디 실험실 · 「포스터」 스킨
---------------------------------------------------------------------------
ui.js applyTheme() 가 를 켜면 이 파일이 살아난다.
기본(studio) 스킨에서는 아무 일도 하지 않도록 모든 규칙이
html[data-skin="poster"] 아래에 있다. tokens/base/kiosk/gallery/operator.css
뒤에 읽히므로 토큰과 부품 규칙을 덮어쓴다.
시각 언어 — 코덱스 1판 포스터 디자인
종이 #f5f4ee 잉크 #171817 보조글자 #52534f
산성 노랑 #ecec39 라벤더 #b4a1ef 초점 #6352cf 꽃심 #3b2a6b
모든 테두리 2px 실선 검정, 모서리 0, 부드러운 그림자 없음.
hover = 4px 4px 0 #171817 굳은 그림자 + translate(-1px,-1px)
명조 없음 — 제목은 산세리프 900, 라벨은 모노 대문자 2px 자간.
주의: --event-* 는 실행 중 인라인으로 덮이므로 여기서는
파생 토큰(--stage, --text, --paper …)을 직접 고정한다.
=========================================================================== */
/* ---------------------------------------------------------------------------
0. 토큰
--------------------------------------------------------------------------- */
html[data-skin="poster"] {
--p-paper: #f5f4ee;
--p-ink: #171817;
--p-muted: #52534f;
--p-acid: #ecec39;
--p-lav: #b4a1ef;
--p-focus: #6352cf;
--p-core: #3b2a6b;
--p-soft: #eeeee6;
--p-hair: #dddddd;
--p-line: 2px solid #171817;
--p-lift: 4px 4px 0 #171817;
--p-rings: repeating-radial-gradient(circle at 50% 50%, #17181748 0 1px, transparent 1px 44px);
/* 무대·종이 계층을 모두 밝은 종이 체계로 */
--stage: var(--p-paper);
--stage-0: var(--p-paper);
--stage-1: #ffffff;
--stage-2: #ffffff;
--stage-3: #ffffff;
--stage-4: var(--p-soft);
--text: var(--p-ink);
--text-soft: var(--p-ink);
--text-faint: var(--p-muted);
--rule: var(--p-ink);
--rule-strong: var(--p-ink);
--paper: #ffffff;
--paper-2: var(--p-acid);
--paper-3: var(--p-lav);
--ink: var(--p-ink);
--ink-soft: var(--p-muted);
--ink-faint:var(--p-muted);
--ink-rule: var(--p-ink);
--surface: #ffffff;
--surface-2: #ffffff;
--surface-3: #ffffff;
--line: var(--p-ink);
--line-strong: var(--p-ink);
--overlay: rgba(23, 24, 23, .66);
--on-primary: var(--p-ink);
/* 강조색은 전부 잉크로 — 코랄/꽃분홍/세이지가 남지 않게 */
--coral: var(--p-ink);
--flower: var(--p-ink);
--sage: var(--p-ink);
/* 의미색 (밝은 판) */
--ok: #2f7d52; --ok-bg: #e6f3ea;
--warn: #8a5a10; --warn-bg: #fdf1d9;
--danger: #a51c1c; --danger-bg: #fbe9e7;
--info: #2c6c96; --info-bg: #e5f0f7;
/* 명조 금지 — 명조 자리에도 산세리프 */
--font-serif: var(--font);
--shadow-1: none;
--shadow-2: none;
--shadow-3: none;
}
/* ---------------------------------------------------------------------------
1. 바탕 · 글꼴 · 라벨
--------------------------------------------------------------------------- */
html[data-skin="poster"] body {
color: var(--p-ink);
background: var(--p-paper);
letter-spacing: 0;
}
html[data-skin="poster"] h1,
html[data-skin="poster"] h2,
html[data-skin="poster"] h3,
html[data-skin="poster"] h4 {
font-family: var(--font);
font-weight: 900;
line-height: 1.1;
letter-spacing: -.04em;
color: var(--p-ink);
}
html[data-skin="poster"] h3 { font-weight: 800; letter-spacing: -.03em; }
html[data-skin="poster"] h4 { font-weight: 800; letter-spacing: -.02em; }
html[data-skin="poster"] em,
html[data-skin="poster"] .paper em { color: inherit; font-style: normal; }
html[data-skin="poster"] :focus-visible { outline: 4px solid var(--p-focus); outline-offset: 4px; }
html[data-skin="poster"] .eyebrow,
html[data-skin="poster"] .mono,
html[data-skin="poster"] .index,
html[data-skin="poster"] .kicker,
html[data-skin="poster"] .eyebrow--coral {
font-family: var(--font-mono);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--p-ink);
}
html[data-skin="poster"] .kicker::before { height: 2px; background: var(--p-ink); }
html[data-skin="poster"] .kicker b { color: var(--p-ink); font-weight: 700; }
/* 상표 — 한마디 (분홍 없음) */
html[data-skin="poster"] .k-mark { font-weight: 900; letter-spacing: -.08em; color: var(--p-ink); }
html[data-skin="poster"] .k-mark em { color: var(--p-ink); }
/* ---------------------------------------------------------------------------
2. 단추
--------------------------------------------------------------------------- */
html[data-skin="poster"] .btn {
min-height: 58px;
padding: 15px 23px;
font-size: var(--step-0);
font-weight: 800;
letter-spacing: -.01em;
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
border-radius: 0;
box-shadow: none;
transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
html[data-skin="poster"] .btn:hover:not(:disabled) {
border-color: var(--p-ink);
box-shadow: var(--p-lift);
transform: translate(-1px, -1px);
}
html[data-skin="poster"] .btn:active:not(:disabled) { box-shadow: none; transform: none; }
html[data-skin="poster"] .btn:disabled { opacity: .45; }
html[data-skin="poster"] .btn--primary,
html[data-skin="poster"] .btn--primary:hover:not(:disabled) {
color: var(--p-ink);
background: var(--p-acid);
border-color: var(--p-ink);
}
html[data-skin="poster"] .btn--accent,
html[data-skin="poster"] .btn--accent:hover:not(:disabled) {
color: var(--p-ink);
background: #ffffff;
border-color: var(--p-ink);
}
html[data-skin="poster"] .btn--ghost {
color: var(--p-ink);
background: transparent;
border-color: transparent;
border-bottom-color: var(--p-ink);
}
html[data-skin="poster"] .btn--ghost:hover:not(:disabled) {
color: var(--p-ink);
background: var(--p-soft);
border-color: transparent;
border-bottom-color: var(--p-ink);
box-shadow: none;
transform: none;
}
html[data-skin="poster"] .btn--danger {
color: #a51c1c;
background: #ffffff;
border-color: var(--p-ink);
}
html[data-skin="poster"] .btn--danger:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--p-ink); }
html[data-skin="poster"] .btn--lg { min-height: 64px; padding: 16px 26px; font-size: var(--step-1); }
html[data-skin="poster"] .btn--sm { min-height: 44px; padding: 9px 14px; font-size: var(--step--1); }
html[data-skin="poster"] .btn--icon { padding: 0; width: 52px; min-height: 52px; }
html[data-skin="poster"] .btn--main { min-width: 290px; padding-inline: 22px; font-size: var(--step-1); }
/* 조용한 행동 — 검정 밑줄 */
html[data-skin="poster"] .quiet {
color: var(--p-ink);
border-bottom: 2px solid var(--p-ink);
font-weight: 700;
}
html[data-skin="poster"] .quiet span,
html[data-skin="poster"] .quiet .arrow { color: var(--p-ink); }
html[data-skin="poster"] .quiet:hover:not(:disabled) { color: var(--p-ink); border-color: var(--p-ink); background: var(--p-acid); }
/* ---------------------------------------------------------------------------
3. 폼
--------------------------------------------------------------------------- */
html[data-skin="poster"] .field > .field__label,
html[data-skin="poster"] .field-label { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .field__hint { color: var(--p-muted); }
html[data-skin="poster"] input[type="text"],
html[data-skin="poster"] input[type="password"],
html[data-skin="poster"] input[type="number"],
html[data-skin="poster"] input[type="search"],
html[data-skin="poster"] input[type="url"],
html[data-skin="poster"] input[type="email"],
html[data-skin="poster"] select,
html[data-skin="poster"] textarea {
min-height: 54px;
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
border-radius: 0;
}
html[data-skin="poster"] select {
background-image: linear-gradient(45deg, transparent 50%, var(--p-ink) 50%), linear-gradient(135deg, var(--p-ink) 50%, transparent 50%);
}
html[data-skin="poster"] input:focus,
html[data-skin="poster"] select:focus,
html[data-skin="poster"] textarea:focus {
border-color: var(--p-ink);
box-shadow: 0 0 0 3px var(--p-focus);
outline: none;
}
html[data-skin="poster"] input:invalid:not(:placeholder-shown) { border-color: #a51c1c; }
html[data-skin="poster"] ::placeholder { color: #8a8b86; }
html[data-skin="poster"] input[type="color"] { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--p-ink); }
html[data-skin="poster"] input[type="range"]::-webkit-slider-thumb {
background: var(--p-acid);
border: 2px solid var(--p-ink);
box-shadow: none;
}
html[data-skin="poster"] input[type="range"]::-moz-range-track { height: 2px; background: var(--p-ink); }
html[data-skin="poster"] input[type="range"]::-moz-range-thumb { background: var(--p-acid); border: 2px solid var(--p-ink); }
/* 체크 목록 — 1px 옅은 선으로 나눈다 */
html[data-skin="poster"] .check { border-bottom: 1px solid var(--p-hair); }
html[data-skin="poster"] .check:hover { background: var(--p-soft); }
html[data-skin="poster"] .check:has(input:focus-visible) { outline: 4px solid var(--p-focus); outline-offset: 2px; }
html[data-skin="poster"] .check input { accent-color: var(--p-ink); }
html[data-skin="poster"] .check__text { color: var(--p-ink); }
html[data-skin="poster"] .check__text small { color: var(--p-muted); }
html[data-skin="poster"] .check__req { color: var(--p-ink); }
html[data-skin="poster"] .check__opt { color: var(--p-muted); }
/* 기기 점검 음량계 */
html[data-skin="poster"] .meter { height: 13px; background: #d6cdec; border: var(--p-line); overflow: hidden; }
html[data-skin="poster"] .meter__fill { height: 100%; background: var(--p-ink); transition: width .1s linear; }
/* ---------------------------------------------------------------------------
4. 카드 · 패널 · 배지 · 알림 · 토스트 · 대화상자 · 표
--------------------------------------------------------------------------- */
html[data-skin="poster"] .card,
html[data-skin="poster"] .panel {
background: #ffffff;
border: var(--p-line);
box-shadow: none;
}
html[data-skin="poster"] .paper {
color: var(--p-ink);
background: #ffffff;
--text: var(--p-ink); --text-soft: var(--p-ink); --text-faint: var(--p-muted);
--rule: var(--p-ink); --rule-strong: var(--p-ink);
--stage-2: #ffffff; --stage-3: var(--p-soft);
}
html[data-skin="poster"] .rule { border-top: 2px solid var(--p-ink); }
/* 배지 — 초기 디자인의 .status-badge: 산성 노랑, 대기·실패는 살구색, 숨김은 회색 */
html[data-skin="poster"] .badge {
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
font-weight: 700;
letter-spacing: .08em;
}
html[data-skin="poster"] .badge--ok { border-color: var(--p-ink); background: var(--p-acid); color: var(--p-ink); }
html[data-skin="poster"] .badge--warn,
html[data-skin="poster"] .badge--danger { border-color: var(--p-ink); background: #f6b19b; color: var(--p-ink); }
html[data-skin="poster"] .badge--info { border-color: var(--p-ink); background: #ffffff; color: var(--p-ink); }
html[data-skin="poster"] .badge--paper { border-color: var(--p-ink); background: var(--p-hair); color: var(--p-ink); }
html[data-skin="poster"] .notice {
color: var(--p-ink);
background: var(--p-soft);
border-left: 5px solid var(--p-ink);
}
html[data-skin="poster"] .notice--ok { border-color: #2f7d52; }
html[data-skin="poster"] .notice--warn { border-color: #8a5a10; background: #fdf1d9; }
html[data-skin="poster"] .notice--danger { border-color: #a51c1c; background: #fbe9e7; }
html[data-skin="poster"] .notice--info { border-color: var(--p-lav); background: var(--p-soft); }
html[data-skin="poster"] .notice--quiet { background: transparent; color: var(--p-muted); border-color: var(--p-ink); }
html[data-skin="poster"] .toast,
html[data-skin="poster"] .toast--ok,
html[data-skin="poster"] .toast--warn,
html[data-skin="poster"] .toast--danger {
color: #ffffff;
background: var(--p-ink);
border: 2px solid var(--p-acid);
box-shadow: none;
}
html[data-skin="poster"] .toast--danger { border-color: #f0a49b; }
html[data-skin="poster"] dialog {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
box-shadow: none;
}
html[data-skin="poster"] dialog::backdrop { background: rgba(23, 24, 23, .66); backdrop-filter: none; }
html[data-skin="poster"] .dialog__head { border-bottom: var(--p-line); }
html[data-skin="poster"] .dialog__foot { border-top: var(--p-line); background: var(--p-paper); }
html[data-skin="poster"] .dialog__close { color: var(--p-ink); border: var(--p-line); background: #ffffff; }
html[data-skin="poster"] .dialog__close:hover { background: var(--p-acid); }
html[data-skin="poster"] .table th { color: var(--p-ink); background: #ffffff; border-bottom: var(--p-line); }
html[data-skin="poster"] .table th,
html[data-skin="poster"] .table td { border-bottom-color: var(--p-hair); }
html[data-skin="poster"] .table th { border-bottom: var(--p-line); }
html[data-skin="poster"] .table tbody tr:hover { background: var(--p-soft); }
html[data-skin="poster"] .table--scroll { border: var(--p-line); }
html[data-skin="poster"] .skeleton { background: linear-gradient(90deg, var(--p-soft) 25%, #ffffff 50%, var(--p-soft) 75%); background-size: 200% 100%; }
/* 연결 상태 점 */
html[data-skin="poster"] .conn { color: var(--p-ink); }
html[data-skin="poster"] .conn__dot { background: var(--p-muted); }
html[data-skin="poster"] .conn[data-state="live"] .conn__dot { background: var(--p-ink); box-shadow: 0 0 0 4px #17181722; }
html[data-skin="poster"] .conn[data-state="offline"],
html[data-skin="poster"] .conn[data-state="offline"] .conn__dot { color: #a51c1c; }
html[data-skin="poster"] .conn[data-state="offline"] .conn__dot { background: #a51c1c; }
/* 음량 막대 — 전부 잉크 */
html[data-skin="poster"] .bars i,
html[data-skin="poster"] .bars--paper i,
html[data-skin="poster"] .bars--live i { background: var(--p-ink); }
/* ---------------------------------------------------------------------------
5. 참가자 화면 — 머리 · 띠 · 진행 리본 · 꼬리
--------------------------------------------------------------------------- */
html[data-skin="poster"] body.kiosk,
html[data-skin="poster"] body.gallery,
html[data-skin="poster"] body.operator { background: var(--p-paper); }
html[data-skin="poster"] .k-head {
background: var(--p-paper);
border-bottom: var(--p-line);
}
html[data-skin="poster"] .k-identity .k-mark { font-size: 26px; font-weight: 900; }
html[data-skin="poster"] .k-identity__sub {
font-size: 11px; letter-spacing: 2px; color: var(--p-ink);
border-left: var(--p-line);
}
html[data-skin="poster"] .k-head__center { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .k-head__center b { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .k-banner { background: var(--p-ink); color: #ffffff; border-bottom: var(--p-line); }
html[data-skin="poster"] .k-banner--info { background: var(--p-soft); color: var(--p-ink); }
html[data-skin="poster"] .k-banner--warn { background: #fdf1d9; color: #8a5a10; }
html[data-skin="poster"] .k-banner--danger { background: #fbe9e7; color: #a51c1c; }
/* 진행 리본 — 하나의 2px 상자, 칸은 2px 선으로 나뉜다 */
html[data-skin="poster"] .k-steps {
margin: 18px var(--gutter) 0;
padding: 0;
border: var(--p-line);
background: #ffffff;
}
html[data-skin="poster"] .k-step {
padding: 14px 18px;
color: var(--p-muted);
background: #ffffff;
border-right: var(--p-line);
font-weight: 700;
opacity: 1;
}
html[data-skin="poster"] .k-steps li:first-child .k-step { padding-left: 18px; }
html[data-skin="poster"] .k-steps li:last-child .k-step { border-right: 0; }
html[data-skin="poster"] .k-step__n { color: inherit; letter-spacing: 2px; }
html[data-skin="poster"] .k-step[data-state="todo"] { color: var(--p-muted); opacity: 1; }
html[data-skin="poster"] .k-step[data-state="done"] { color: var(--p-ink); background: #ffffff; }
html[data-skin="poster"] .k-step[data-state="done"]:hover { color: var(--p-ink); background: var(--p-acid); }
html[data-skin="poster"] .k-step[data-state="active"] {
color: var(--p-acid);
background: var(--p-ink);
font-weight: 800;
padding-left: 18px;
}
html[data-skin="poster"] .k-step[data-state="active"] .k-step__n { color: var(--p-acid); }
html[data-skin="poster"] .k-foot {
color: var(--p-ink);
background: var(--p-paper);
border-top: var(--p-line);
}
html[data-skin="poster"] .k-foot b { color: var(--p-ink); font-weight: 700; }
/* ---------------------------------------------------------------------------
6. 참가자 화면 — 단계 화면 공통 틀
--------------------------------------------------------------------------- */
html[data-skin="poster"] .k-muted { color: var(--p-muted); }
html[data-skin="poster"] .k-lead { color: var(--p-ink); }
html[data-skin="poster"] .k-display,
html[data-skin="poster"] .k-context h1 {
font-family: var(--font);
font-weight: 900;
line-height: 1.06;
letter-spacing: -.045em;
color: var(--p-ink);
}
html[data-skin="poster"] .k-context > p:not(.index) { color: var(--p-ink); }
html[data-skin="poster"] .k-letterline {
border-top: var(--p-line);
border-bottom: var(--p-line);
}
html[data-skin="poster"] .k-letterline span { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .k-letterline strong { font-family: var(--font); font-weight: 800; font-size: 22px; letter-spacing: -.03em; line-height: 1.4; }
html[data-skin="poster"] .k-letterline small { color: var(--p-muted); }
html[data-skin="poster"] .k-noterow { border-top: var(--p-line); color: var(--p-muted); }
html[data-skin="poster"] .k-noterow span:nth-child(2) { color: var(--p-ink); }
html[data-skin="poster"] .k-form {
background: #ffffff;
border: var(--p-line);
box-shadow: none;
}
html[data-skin="poster"] .k-form .field__label { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .k-list li { color: var(--p-ink); border-bottom: 1px solid var(--p-hair); }
html[data-skin="poster"] .k-list b { color: var(--p-ink); font-weight: 700; letter-spacing: 2px; }
/* ---------------------------------------------------------------------------
7. 첫 화면 — 포스터 히어로
--------------------------------------------------------------------------- */
html[data-skin="poster"] .hero__copy h1 {
font-family: var(--font);
font-size: clamp(56px, 6.4vw, 96px);
font-weight: 900;
line-height: 1.04;
letter-spacing: -.06em;
color: var(--p-ink);
}
/* 둘째 줄 — 산성 노랑 마커 */
html[data-skin="poster"] .hero__copy h1 em,
html[data-skin="poster"] .k-display em {
display: inline-block;
color: var(--p-ink);
background: var(--p-acid);
box-shadow: 9px 0 var(--p-acid), -4px 0 var(--p-acid);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
html[data-skin="poster"] .hero__lead { color: var(--p-ink); font-size: 18px; line-height: 1.8; letter-spacing: 0; }
html[data-skin="poster"] .hero__facts { border-top: var(--p-line); }
html[data-skin="poster"] .hero__facts span { color: var(--p-muted); }
html[data-skin="poster"] .hero__facts b { color: var(--p-ink); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .hero__facts b small { color: var(--p-ink); }
/* 사진 대신 라벤더 카드 + 동심원 + 여덟 잎 꽃 */
html[data-skin="poster"] .photo-mic {
inset: 0 0 6% 0;
overflow: hidden;
background: var(--p-rings), var(--p-lav);
background-color: var(--p-lav);
border: var(--p-line);
transform: rotate(2deg);
}
html[data-skin="poster"] .photo-mic img,
html[data-skin="poster"] .photo-mic .photo-caption,
html[data-skin="poster"] .photo-flower,
html[data-skin="poster"] .hero__level,
html[data-skin="poster"] .hero__stamp { display: none; }
/* 꽃잎 — 여덟 장의 산성 노랑 꽃 (SVG, 검은 외곽선) */
html[data-skin="poster"] .photo-mic::before {
content: '';
position: absolute; inset: auto;
left: 50%; top: 50%;
width: 260px; height: 260px;
margin: -130px 0 0 -130px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
pointer-events: none;
}
/* 꽃심 — 짙은 보라 */
html[data-skin="poster"] .photo-mic::after {
content: '';
position: absolute; inset: auto;
left: 50%; top: 50%;
width: 66px; height: 66px;
margin: -33px 0 0 -33px;
background: var(--p-core);
border: var(--p-line);
border-radius: 50%;
pointer-events: none;
}
/* 둥근 스티커 — 「소리를 남겨보세요 ↗」 */
html[data-skin="poster"] .hero__sticker {
display: flex; align-items: center; justify-content: center;
position: absolute; right: -6px; bottom: 0; z-index: 3;
width: 118px; height: 118px;
padding: 10px;
text-align: center;
font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -.02em;
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
border-radius: 50%;
transform: rotate(-14deg);
word-break: keep-all;
}
/* 여정 리본 */
html[data-skin="poster"] .journey {
border-top: var(--p-line);
border-bottom: var(--p-line);
}
html[data-skin="poster"] .journey span { color: var(--p-ink); border-right: var(--p-line); }
html[data-skin="poster"] .journey span:last-child { border-right: 0; }
html[data-skin="poster"] .journey b { color: var(--p-ink); font-weight: 700; letter-spacing: 2px; }
/* 마음 고르기 */
html[data-skin="poster"] .section-head h2 {
font-family: var(--font);
font-weight: 900;
line-height: 1.12;
letter-spacing: -.04em;
}
html[data-skin="poster"] .section-head > p { color: var(--p-muted); }
html[data-skin="poster"] .emotion {
min-height: 116px;
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
html[data-skin="poster"] .emotion:nth-child(3n+1) { background: var(--p-lav); }
html[data-skin="poster"] .emotion:nth-child(3n+2) { background: var(--p-acid); }
html[data-skin="poster"] .emotion:hover {
border-color: var(--p-ink);
box-shadow: var(--p-lift);
transform: translate(-1px, -1px);
}
html[data-skin="poster"] .emotion__n { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .emotion__icon { color: var(--p-ink); font-size: 32px; font-weight: 400; }
html[data-skin="poster"] .emotion strong { font-weight: 800; letter-spacing: -.03em; }
html[data-skin="poster"] .emotion small { opacity: .8; }
html[data-skin="poster"] .emotion[aria-pressed="true"] {
color: var(--p-acid);
background: var(--p-ink);
border-color: var(--p-ink);
}
html[data-skin="poster"] .emotion[aria-pressed="true"] .emotion__n,
html[data-skin="poster"] .emotion[aria-pressed="true"] .emotion__icon { color: var(--p-acid); }
html[data-skin="poster"] .compose { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .compose__top {
color: var(--p-acid);
background: var(--p-ink);
border-bottom: var(--p-line);
letter-spacing: 2px;
}
html[data-skin="poster"] .compose__top i { color: var(--p-acid); }
html[data-skin="poster"] .compose__label { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .compose__body h3 { font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .compose__body > p:not(.compose__label) { color: var(--p-muted); }
html[data-skin="poster"] .compose__steps span { color: var(--p-ink); border-top: var(--p-line); }
html[data-skin="poster"] .compose__steps span b { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .compose__foot { border-top: var(--p-line); }
html[data-skin="poster"] .compose__foot p { color: var(--p-muted); }
html[data-skin="poster"] .compose__foot .btn { min-height: 52px; background: var(--p-acid); }
/* 간직하기 */
html[data-skin="poster"] .keep__image { background: var(--p-lav); border: var(--p-line); }
html[data-skin="poster"] .keep__copy.paper {
color: var(--p-ink);
background: var(--p-lav);
border: var(--p-line);
border-left: 0;
}
html[data-skin="poster"] .keep__copy h2 { font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }
html[data-skin="poster"] .keep__copy > p:not(.index) { color: var(--p-ink); }
html[data-skin="poster"] .keep__chips span { color: var(--p-ink); background: #ffffff; border: var(--p-line); font-weight: 700; }
html[data-skin="poster"] .keep__copy .quiet { color: var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .keep__copy .quiet:hover { color: var(--p-ink); }
/* 신뢰 띠 */
html[data-skin="poster"] .trust {
color: var(--p-ink);
border-top: var(--p-line);
border-bottom: var(--p-line);
}
html[data-skin="poster"] .trust span::before { color: var(--p-ink); }
html[data-skin="poster"] .trust .quiet { color: var(--p-ink); }
/* ---------------------------------------------------------------------------
8. 녹음실 콘솔
--------------------------------------------------------------------------- */
html[data-skin="poster"] .studio {
background: #ffffff;
border: var(--p-line);
box-shadow: none;
}
html[data-skin="poster"] .studio__photo {
background: var(--p-rings), var(--p-lav);
background-color: var(--p-lav);
border-right: var(--p-line);
}
html[data-skin="poster"] .studio__photo img { display: none; }
html[data-skin="poster"] .studio__photo::after { display: none; }
html[data-skin="poster"] .studio__note { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .studio__console { background: var(--p-lav); color: var(--p-ink); }
html[data-skin="poster"] .console__row { color: var(--p-ink); letter-spacing: 1px; }
html[data-skin="poster"] .console__row span:first-child { color: var(--p-ink); }
html[data-skin="poster"] .console__row--rule { border-top: var(--p-line); }
html[data-skin="poster"] .console__clock { color: var(--p-ink); font-weight: 900; letter-spacing: -.06em; }
html[data-skin="poster"] .console__clock[data-live="1"] { color: var(--p-ink); }
html[data-skin="poster"] .console__word { font-family: var(--font); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .console__word em {
color: var(--p-ink);
background: var(--p-acid);
box-shadow: 6px 0 var(--p-acid), -3px 0 var(--p-acid);
}
html[data-skin="poster"] .console__help { color: var(--p-ink); }
html[data-skin="poster"] .console__hint { color: var(--p-ink); }
html[data-skin="poster"] .console__hint[data-kind="warn"] { color: #8a5a10; }
html[data-skin="poster"] .console__hint[data-kind="ok"] { color: #2f7d52; }
html[data-skin="poster"] .live-dot { background: var(--p-ink); box-shadow: 0 0 0 4px #17181722; }
html[data-skin="poster"] .live-dot--off { background: var(--p-muted); box-shadow: none; }
html[data-skin="poster"] .level-rule { background: var(--p-ink); }
/* 녹음 단추 — 검정 위 산성 노랑; 녹음 중엔 뒤집히고 맥동한다 */
html[data-skin="poster"] .rec-toggle {
color: var(--p-acid);
background: var(--p-ink);
border: var(--p-line);
font-weight: 800;
box-shadow: none;
transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
html[data-skin="poster"] .rec-toggle:hover:not(:disabled) { box-shadow: var(--p-lift); transform: translate(-1px, -1px); }
html[data-skin="poster"] .rec-toggle:active:not(:disabled) { box-shadow: none; transform: none; }
html[data-skin="poster"] .rec-symbol { background: var(--p-acid); box-shadow: none; }
html[data-skin="poster"] .rec-toggle[data-live="1"] {
color: var(--p-ink);
background: var(--p-acid);
animation: poster-pulse 1.3s infinite;
}
html[data-skin="poster"] .rec-toggle[data-live="1"] .rec-symbol { background: var(--p-ink); }
@keyframes poster-pulse {
50% { box-shadow: 0 0 0 12px #ecec3933; }
}
html[data-skin="poster"] audio { color-scheme: light; }
/* ---------------------------------------------------------------------------
9. 다시 듣고 꾸미기
--------------------------------------------------------------------------- */
html[data-skin="poster"] .k-take { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .k-take__head { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .k-take__head b { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .k-take small { color: var(--p-muted); }
html[data-skin="poster"] .k-label { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .k-headline {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
font-family: var(--font);
font-weight: 800;
font-size: 22px;
letter-spacing: -.02em;
line-height: 1.45;
}
html[data-skin="poster"] .k-headline:focus { border-color: var(--p-ink); box-shadow: 0 0 0 3px var(--p-focus); }
html[data-skin="poster"] .k-help { color: var(--p-muted); }
html[data-skin="poster"] .k-bg {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
html[data-skin="poster"] .k-bg:hover { box-shadow: var(--p-lift); transform: translate(-1px, -1px); }
html[data-skin="poster"] .k-bg i { border: 2px solid var(--p-ink); }
html[data-skin="poster"] .k-bg small { color: var(--p-muted); }
html[data-skin="poster"] .k-bg[aria-pressed="true"] { color: var(--p-acid); background: var(--p-ink); border-color: var(--p-ink); box-shadow: none; }
html[data-skin="poster"] .k-bg[aria-pressed="true"] small { color: var(--p-acid); }
html[data-skin="poster"] .k-trim__row span { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] details.k-details { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] details.k-details summary { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] details.k-details summary::after { color: var(--p-ink); }
/* 미리보기 — 라벤더 판 + 동심원, 사진 없음 */
html[data-skin="poster"] .k-preview {
background: var(--p-rings), var(--p-lav);
background-color: var(--p-lav);
border: var(--p-line);
}
html[data-skin="poster"] .k-preview > img { display: none; }
html[data-skin="poster"] .k-preview::after { display: none; }
html[data-skin="poster"] .k-preview__label { color: var(--p-ink); text-shadow: none; letter-spacing: 2px; }
html[data-skin="poster"] .k-preview canvas { border: var(--p-line); box-shadow: none; }
/* ---------------------------------------------------------------------------
10. 참여 완료 — 편지 · 티켓 (사진 없이 세로로 쌓는다)
--------------------------------------------------------------------------- */
html[data-skin="poster"] .k-meta { border-top: var(--p-line); border-bottom: var(--p-line); }
html[data-skin="poster"] .k-meta span { color: var(--p-muted); letter-spacing: 2px; }
html[data-skin="poster"] .k-meta b { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .k-meta b.mono { color: var(--p-ink); letter-spacing: .04em; text-transform: none; }
html[data-skin="poster"] .k-qr { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .k-qr canvas { border: var(--p-line); }
html[data-skin="poster"] .k-qr .mono { color: var(--p-muted); letter-spacing: .06em; text-transform: none; }
/* 완료 도장 — 초기 디자인의 .success-mark (산성 노랑 네모, -6deg, ↗) */
html[data-skin="poster"] .k-page--result .k-context::before {
content: '↗';
display: flex; align-items: center; justify-content: center;
width: 126px; height: 126px;
margin: 0 0 34px 6px;
font-size: 84px; font-weight: 900; line-height: 1;
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
transform: rotate(-6deg);
}
html[data-skin="poster"] .k-result {
min-height: 0;
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
}
html[data-skin="poster"] .k-result__botanic { display: none; }
html[data-skin="poster"] .k-result .letter {
position: relative; left: auto; top: auto;
width: 100%;
min-height: 420px;
}
html[data-skin="poster"] .letter {
--text: var(--p-ink);
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
border-top: 12px solid var(--p-ink);
box-shadow: none;
}
html[data-skin="poster"] .letter__head,
html[data-skin="poster"] .letter__foot { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .letter__head { border-bottom: 1px solid var(--p-ink); }
html[data-skin="poster"] .letter__foot { border-top: 1px solid var(--p-ink); }
html[data-skin="poster"] .letter__to { color: var(--p-ink); }
html[data-skin="poster"] .letter__line { font-family: var(--font); font-weight: 900; letter-spacing: -.04em; line-height: 1.22; }
html[data-skin="poster"] .letter__wave .bars { opacity: 1; }
html[data-skin="poster"] .letter__wave .bars i { background: var(--p-ink); }
html[data-skin="poster"] .ticket {
position: relative; right: auto; bottom: auto;
width: 100%; height: auto;
margin-top: 12px;
padding: 18px 22px;
display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
box-shadow: none;
clip-path: none;
}
html[data-skin="poster"] .ticket span { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .ticket strong { font-weight: 900; letter-spacing: -.05em; }
html[data-skin="poster"] .k-result.reveal .letter { animation: letter-arrive .6s .1s cubic-bezier(.2,.7,.2,1) both; }
html[data-skin="poster"] .k-result.reveal .ticket { animation: ticket-arrive .5s .4s cubic-bezier(.2,.7,.2,1) both; }
html[data-skin="poster"] .k-demo-result { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .k-demo-result img { border: var(--p-line); }
html[data-skin="poster"] .k-progress__bar { background: var(--p-hair); border: 1px solid var(--p-ink); height: 8px; }
html[data-skin="poster"] .k-progress__fill { background: var(--p-ink); }
html[data-skin="poster"] .k-closed__mark { color: var(--p-ink); }
/* ---------------------------------------------------------------------------
11. 목소리 갤러리 · 내 한마디 찾기
--------------------------------------------------------------------------- */
html[data-skin="poster"] .g-lead { color: var(--p-ink); }
html[data-skin="poster"] .g-hero__copy h1 {
font-family: var(--font);
font-weight: 900;
line-height: 1.06;
letter-spacing: -.05em;
}
html[data-skin="poster"] .g-hero__lead { color: var(--p-ink); }
html[data-skin="poster"] .g-hero__facts { border-top: var(--p-line); }
html[data-skin="poster"] .g-hero__facts span { color: var(--p-muted); }
html[data-skin="poster"] .g-hero__facts b { color: var(--p-ink); font-weight: 900; }
html[data-skin="poster"] .g-hero__facts b small { color: var(--p-ink); }
html[data-skin="poster"] .g-photo--field {
inset: 0 0 6% 0;
background: var(--p-rings), var(--p-lav);
background-color: var(--p-lav);
border: var(--p-line);
transform: rotate(2deg);
}
html[data-skin="poster"] .g-photo--field img { display: none; }
html[data-skin="poster"] .g-photo--field::after { display: none; }
html[data-skin="poster"] .g-photo--field .g-photo__caption { color: var(--p-ink); text-shadow: none; letter-spacing: 2px; top: 20px; bottom: auto; }
html[data-skin="poster"] .g-photo--inset {
border: var(--p-line);
background: #ffffff;
box-shadow: var(--p-lift);
}
html[data-skin="poster"] .g-hero__stamp { display: none; }
html[data-skin="poster"] .g-ticker {
color: var(--p-ink);
background: var(--p-paper);
border-top: var(--p-line);
border-bottom: var(--p-line);
letter-spacing: 2px;
}
html[data-skin="poster"] .g-section-head h2 { font-family: var(--font); font-weight: 900; line-height: 1.12; letter-spacing: -.04em; }
html[data-skin="poster"] .g-status { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .g-filter {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
font-weight: 700;
transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
html[data-skin="poster"] .g-filter:hover { color: var(--p-ink); border-color: var(--p-ink); box-shadow: var(--p-lift); transform: translate(-1px, -1px); }
html[data-skin="poster"] .g-filter[aria-pressed="true"] { color: var(--p-acid); background: var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .g-card {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
html[data-skin="poster"] .g-card:hover { background: #ffffff; border-color: var(--p-ink); box-shadow: var(--p-lift); transform: translate(-1px, -1px); }
html[data-skin="poster"] .g-card__poster { background: var(--p-lav); border-bottom: var(--p-line); }
html[data-skin="poster"] .g-card__meta { color: var(--p-muted); letter-spacing: 2px; }
html[data-skin="poster"] .g-card__cat { color: var(--p-ink); }
html[data-skin="poster"] .g-card__cat i { color: var(--p-ink); }
html[data-skin="poster"] .g-card__headline { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
html[data-skin="poster"] .g-card__who { color: var(--p-muted); }
html[data-skin="poster"] .g-empty { color: var(--p-muted); border: var(--p-line); background: #ffffff; }
html[data-skin="poster"] .g-empty__mark { color: var(--p-ink); }
html[data-skin="poster"] .g-post__poster { background: var(--p-lav); border: var(--p-line); }
html[data-skin="poster"] .g-post__meta { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .g-post__meta b { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .g-post__note { color: var(--p-muted); border-top: var(--p-line); }
html[data-skin="poster"] .g-find__intro h1 { font-family: var(--font); font-weight: 900; line-height: 1.06; letter-spacing: -.05em; }
html[data-skin="poster"] .g-find__note { color: var(--p-muted); border-top: var(--p-line); }
html[data-skin="poster"] .g-form { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .g-form .field__label { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .g-form > .mono { border-bottom: var(--p-line); }
html[data-skin="poster"] .g-result h1 { font-family: var(--font); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .g-result__meta { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .g-result__meta b { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .g-result__poster { background: var(--p-lav); border: var(--p-line); }
html[data-skin="poster"] .g-result__consent { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .g-result__consent li { border-bottom: 1px solid var(--p-hair); }
html[data-skin="poster"] .g-result__delete { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .g-result__delete h3 { color: #a51c1c; }
html[data-skin="poster"] .g-result__tail { border-top: var(--p-line); }
/* ---------------------------------------------------------------------------
12. 운영자 콘솔 · 설정
--------------------------------------------------------------------------- */
html[data-skin="poster"] .o-login .k-muted { color: var(--p-muted); }
html[data-skin="poster"] .o-login__card { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .o-login__card > .eyebrow { color: var(--p-ink); }
html[data-skin="poster"] .o-login__card h1 { font-family: var(--font); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .o-head {
background: var(--p-paper);
backdrop-filter: none;
border-bottom: var(--p-line);
}
html[data-skin="poster"] .o-head__brand .k-mark { font-size: 26px; }
html[data-skin="poster"] .o-head__brand small { color: var(--p-ink); letter-spacing: 2px; border-left: var(--p-line); }
html[data-skin="poster"] .o-tabs::-webkit-scrollbar-thumb { background: var(--p-ink); }
html[data-skin="poster"] .o-tab {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
font-weight: 700;
transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
html[data-skin="poster"] .o-tab:hover { color: var(--p-ink); border-color: var(--p-ink); box-shadow: var(--p-lift); transform: translate(-1px, -1px); }
html[data-skin="poster"] .o-tab[aria-selected="true"] { color: var(--p-acid); background: var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .o-tab__count { background: #17181722; }
html[data-skin="poster"] .o-tab[aria-selected="true"] .o-tab__count { background: #ecec3933; }
html[data-skin="poster"] .o-tile { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .o-tile__label { color: var(--p-muted); letter-spacing: 2px; }
html[data-skin="poster"] .o-tile__value { color: var(--p-ink); font-family: var(--font-mono); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .o-tile__note { color: var(--p-muted); }
html[data-skin="poster"] .o-tile--alert { border-color: #a51c1c; }
html[data-skin="poster"] .o-tile--alert .o-tile__label,
html[data-skin="poster"] .o-tile--alert .o-tile__value { color: #a51c1c; }
html[data-skin="poster"] .o-tile--warn { border-color: #8a5a10; }
html[data-skin="poster"] .o-tile--warn .o-tile__label,
html[data-skin="poster"] .o-tile--warn .o-tile__value { color: #8a5a10; }
html[data-skin="poster"] .o-booth { border: var(--p-line); background: #ffffff; }
html[data-skin="poster"] .o-booth button { color: var(--p-ink); }
html[data-skin="poster"] .o-booth button + button { border-left: var(--p-line); }
html[data-skin="poster"] .o-booth button:hover { color: var(--p-ink); background: var(--p-soft); }
html[data-skin="poster"] .o-toolbar input[type="search"],
html[data-skin="poster"] .o-toolbar select { min-height: 48px; }
html[data-skin="poster"] .o-item { background: #ffffff; border: var(--p-line); box-shadow: none; }
html[data-skin="poster"] .o-item[data-status="failed"] { border-color: #a51c1c; }
html[data-skin="poster"] .o-item[data-status="hidden"] { border-style: dashed; }
html[data-skin="poster"] .o-item[data-flag="reported"] { border-color: var(--p-ink); box-shadow: var(--p-lift); }
html[data-skin="poster"] .o-item__thumb { background: var(--p-lav); border: var(--p-line); }
html[data-skin="poster"] .o-item__title { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
html[data-skin="poster"] .o-item__who { color: var(--p-ink); }
html[data-skin="poster"] .o-item__code { color: var(--p-muted); letter-spacing: 2px; }
html[data-skin="poster"] .o-item__note { color: var(--p-ink); background: var(--p-soft); border-left: 5px solid var(--p-ink); }
html[data-skin="poster"] .o-listen { background: var(--p-paper); border: var(--p-line); }
html[data-skin="poster"] .o-listen__label { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-approve { border: 2px dashed var(--p-ink); background: #ffffff; }
html[data-skin="poster"] .o-approve > strong { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-approve input { accent-color: var(--p-ink); }
html[data-skin="poster"] .notice .btn { color: var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .notice .btn:hover:not(:disabled) { border-color: var(--p-ink); }
html[data-skin="poster"] .notice .btn--primary { color: var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .o-section { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .o-section > h3 {
font-family: var(--font);
font-weight: 900;
letter-spacing: -.03em;
border-bottom: var(--p-line);
}
html[data-skin="poster"] .o-section h4 { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-grid2 > .panel { background: #ffffff; }
html[data-skin="poster"] .o-grid2 > .panel > .field__label { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-color { border: var(--p-line); background: #ffffff; }
html[data-skin="poster"] .o-color > span { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-cat { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .o-cat[data-enabled="false"] { border-style: dashed; }
html[data-skin="poster"] .o-cat__handle small { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-word { color: var(--p-ink); background: #ffffff; border: var(--p-line); font-weight: 700; }
html[data-skin="poster"] .o-word__n { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-word button { color: var(--p-ink); }
html[data-skin="poster"] .o-word button:hover { color: #a51c1c; border-color: #a51c1c; }
html[data-skin="poster"] .o-slot { background: #ffffff; border: var(--p-line); }
html[data-skin="poster"] .o-slot[data-filled="false"] { border-style: dashed; border-color: var(--p-ink); }
html[data-skin="poster"] .o-slot[data-filled="false"] .o-slot__word { color: var(--p-muted); }
html[data-skin="poster"] .o-slot__n { color: var(--p-ink); letter-spacing: 2px; }
html[data-skin="poster"] .o-slot__word { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; }
html[data-skin="poster"] .o-savebar {
color: var(--p-ink);
background: #ffffff;
border: var(--p-line);
box-shadow: none;
}
html[data-skin="poster"] .o-savebar[data-dirty="true"] { background: var(--p-acid); border-color: var(--p-ink); }
html[data-skin="poster"] .o-savebar[data-dirty="true"] .grow { color: var(--p-ink); font-weight: 800; }
html[data-skin="poster"] .o-savebar[data-dirty="true"] .grow::before { color: var(--p-ink); }
html[data-skin="poster"] .o-log { border-top: var(--p-line); }
html[data-skin="poster"] .o-log__row { border-bottom: 1px solid var(--p-hair); }
html[data-skin="poster"] .o-log__row:hover { background: var(--p-soft); }
html[data-skin="poster"] .o-log__time { color: var(--p-muted); }
html[data-skin="poster"] .o-pair {
color: var(--p-ink);
background: var(--p-acid);
border: var(--p-line);
border-top: 12px solid var(--p-ink);
--text: var(--p-ink); --text-soft: var(--p-ink); --text-faint: var(--p-muted);
}
html[data-skin="poster"] .o-pair > .eyebrow { color: var(--p-ink); }
html[data-skin="poster"] .o-pair__code { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .o-empty { color: var(--p-muted); background: #ffffff; border: 2px dashed var(--p-ink); }
html[data-skin="poster"] .o-empty__mark { color: var(--p-ink); }
/* ---------------------------------------------------------------------------
13. 화면 크기 — 포스터 전용 요소만 손본다 (나머지는 기존 분기점을 따른다)
--------------------------------------------------------------------------- */
@media (max-width: 1200px) {
html[data-skin="poster"] .hero__copy h1 { font-size: clamp(48px, 5.6vw, 70px); }
html[data-skin="poster"] .photo-mic::before { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
html[data-skin="poster"] .photo-mic::after { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
}
/* 11인치 태블릿 세로 화면에서는 단계를 한 줄에 나누지 않는다. */
@media (min-width: 761px) and (max-width: 900px) {
html[data-skin="poster"] body.kiosk .k-steps {
grid-auto-flow: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-skin="poster"] body.kiosk .k-step {
min-height: 56px;
padding: 12px 14px;
border-bottom: var(--p-line);
white-space: normal;
}
html[data-skin="poster"] body.kiosk .k-steps li:nth-child(even) .k-step { border-right: 0; }
html[data-skin="poster"] body.kiosk .k-steps:not(.k-steps--odd) li:nth-last-child(-n+2) .k-step { border-bottom: 0; }
html[data-skin="poster"] body.kiosk .k-steps--odd li:last-child { grid-column: 1 / -1; }
html[data-skin="poster"] body.kiosk .k-steps--odd li:last-child .k-step { border-right: 0; border-bottom: 0; }
}
@media (max-width: 760px) {
html[data-skin="poster"] .k-steps { margin: 14px 19px 0; }
html[data-skin="poster"] .k-step { border-bottom: var(--p-line); padding: 10px 12px; }
html[data-skin="poster"] .k-steps li:nth-child(odd) .k-step { padding-left: 12px; }
html[data-skin="poster"] .k-steps li:nth-child(even) .k-step { border-right: 0; }
html[data-skin="poster"] .k-steps:not(.k-steps--odd) li:nth-last-child(-n+2) .k-step { border-bottom: 0; }
html[data-skin="poster"] .k-steps--odd li:last-child { grid-column: 1 / -1; }
html[data-skin="poster"] .k-steps--odd li:last-child .k-step { border-right: 0; border-bottom: 0; }
html[data-skin="poster"] .k-step[data-state="active"] { padding-left: 12px; }
html[data-skin="poster"] .hero__copy h1 { font-size: clamp(44px, 9vw, 66px); letter-spacing: -.05em; }
html[data-skin="poster"] .hero__copy h1 em { box-shadow: 6px 0 var(--p-acid), -3px 0 var(--p-acid); }
html[data-skin="poster"] .hero__visual { height: 380px; }
html[data-skin="poster"] .photo-mic { inset: 0; }
html[data-skin="poster"] .photo-mic::before { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
html[data-skin="poster"] .photo-mic::after { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
html[data-skin="poster"] .hero__sticker { width: 90px; height: 90px; font-size: 12px; right: -4px; bottom: -6px; }
html[data-skin="poster"] .journey span { border-bottom: var(--p-line); }
html[data-skin="poster"] .journey span:nth-child(n+3) { border-bottom: 0; }
html[data-skin="poster"] .keep__copy.paper { border-left: var(--p-line); border-top: 0; }
html[data-skin="poster"] .studio__photo { border-right: var(--p-line); }
html[data-skin="poster"] .g-hero__visual { height: 380px; }
html[data-skin="poster"] .g-photo--field { inset: 0; }
html[data-skin="poster"] .k-result .letter { min-height: 360px; }
}
@media (max-width: 430px) {
html[data-skin="poster"] .hero__copy h1 { font-size: 40px; letter-spacing: -.04em; }
html[data-skin="poster"] .hero__visual { height: 320px; }
html[data-skin="poster"] .photo-mic::before { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
html[data-skin="poster"] .photo-mic::after { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
html[data-skin="poster"] .studio__photo { border-right: 0; border-bottom: var(--p-line); }
html[data-skin="poster"] .k-result .letter { width: 100%; min-height: 320px; padding: 18px; }
html[data-skin="poster"] .ticket { width: 100%; height: auto; padding: 14px 16px; }
html[data-skin="poster"] .k-headline { font-size: 19px; }
}
/* ---------------------------------------------------------------------------
14. 움직임 줄이기
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html[data-skin="poster"] .rec-toggle[data-live="1"] { animation: none; }
html[data-skin="poster"] .btn:hover:not(:disabled),
html[data-skin="poster"] .emotion:hover,
html[data-skin="poster"] .rec-toggle:hover:not(:disabled),
html[data-skin="poster"] .k-bg:hover,
html[data-skin="poster"] .g-filter:hover,
html[data-skin="poster"] .g-card:hover,
html[data-skin="poster"] .o-tab:hover { transform: none; }
}
/* 녹음 무대 — 잘린 스티커가 아니라 마이크·파형·코스모스가 한 장면으로 보이도록 */
html[data-skin="poster"] .studio--main .studio__photo {
background: radial-gradient(circle at 50% 46%, #f9f5ff 0 25%, #e8dfff 64%, #d2c3fa 100%);
}
html[data-skin="poster"] .studio--main .studio__theater::before {
content: 'VOICE IN BLOOM / 01'; z-index: 6; color: #28203e; font-size: 10px;
}
html[data-skin="poster"] .studio--main .studio__theater::after { border-color: #59427555; z-index: 6; }
html[data-skin="poster"] .studio--main .studio__halo { display: block; z-index: 0; border-color: #ab8cde88; }
html[data-skin="poster"] .studio--main .studio__halo--one { width: min(72%, 390px); top: 51%; }
html[data-skin="poster"] .studio--main .studio__halo--two { width: min(99%, 530px); top: 51%; border-style: solid; opacity: .38; animation: none; }
html[data-skin="poster"] .studio--main .studio__theater-mic {
z-index: 3; width: 82%; height: 84%; top: 52%; object-fit: contain; object-position: center;
clip-path: none; mix-blend-mode: multiply; filter: drop-shadow(0 24px 20px #4c3c6855);
animation: studio-mic-breathe 6s ease-in-out infinite;
}
html[data-skin="poster"] .studio--main .studio__theater-flower {
width: clamp(64px, 8vw, 116px); height: auto; color: inherit; text-shadow: none;
filter: drop-shadow(0 10px 8px #5d416d33); animation: studio-cosmos-sway 7s ease-in-out infinite;
}
html[data-skin="poster"] .studio--main .studio__theater-flower--one { left: 2%; top: 25%; transform-origin: 50% 95%; }
html[data-skin="poster"] .studio--main .studio__theater-flower--two { right: 2%; left: auto; bottom: 6%; width: clamp(48px, 6vw, 84px); transform-origin: 50% 95%; animation-delay: -3s; }
html[data-skin="poster"] .studio--main .studio__orbit { width: 7px; height: 7px; border-radius: 50%; background: #ffe553; box-shadow: 0 0 0 8px #ffe55340; }
html[data-skin="poster"] .studio--main .studio__signal {
position: absolute; z-index: 2; left: 5%; right: 5%; top: 49%; height: 74px;
display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
html[data-skin="poster"] .studio--main .studio__signal i {
display: block; width: 2px; height: 13px; border-radius: 9px; background: #6d4cc6;
opacity: .58; transform-origin: center; animation: studio-signal-idle 3s ease-in-out infinite;
}
html[data-skin="poster"] .studio--main .studio__signal i:nth-child(3n) { height: 33px; animation-delay: -.8s; }
html[data-skin="poster"] .studio--main .studio__signal i:nth-child(4n) { height: 51px; animation-delay: -1.7s; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__signal i { animation: studio-signal-live .85s ease-in-out infinite alternate; opacity: .9; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__signal i:nth-child(3n) { animation-delay: -.35s; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__signal i:nth-child(4n) { animation-delay: -.6s; }
html[data-skin="poster"] .studio--main .studio__theater-word {
z-index: 7; left: auto; right: 28px; top: 54px; bottom: auto; transform: none;
padding: 7px 12px; color: #2d2146; background: #ffffffd9; border: 1px solid #493869;
box-shadow: 3px 3px 0 #493869; font-size: clamp(15px, 1.4vw, 20px); letter-spacing: -.03em;
}
html[data-skin="poster"] .studio--main[data-live="1"] .studio__theater-mic { animation-duration: 3s; }
@keyframes studio-mic-breathe { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-51.2%); } }
@keyframes studio-cosmos-sway { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-5px); } }
@keyframes studio-signal-idle { 50% { transform: scaleY(.55); opacity: .36; } }
@keyframes studio-signal-live { to { transform: scaleY(1.65); } }
html[data-skin="poster"] .k-form--consent {
background: #f2edff; border: 2px solid #302545; box-shadow: 9px 9px 0 #ccbdf8;
padding: clamp(24px, 3vw, 44px);
}
html[data-skin="poster"] .k-consent-head { margin: -4px 0 28px; border-bottom: 2px solid #302545; padding-bottom: 20px; }
html[data-skin="poster"] .k-consent-head > span { font: 800 11px var(--font-mono); color: #6d4cc6; letter-spacing: .14em; }
html[data-skin="poster"] .k-consent-head h2 { margin: 9px 0; font-family: var(--p-display); font-size: clamp(25px, 2.6vw, 38px); line-height: 1.2; letter-spacing: -.055em; }
html[data-skin="poster"] .k-consent-head p { margin: 0; font-size: 15px; line-height: 1.55; color: #473b5d; }
html[data-skin="poster"] .k-form--consent .field { margin: 0 0 21px; }
html[data-skin="poster"] .k-form--consent .field__label { margin-bottom: 8px; font-size: 17px; }
html[data-skin="poster"] .k-form--consent .field input { background: #fff; min-height: 58px; font-size: 19px; font-weight: 700; border: 2px solid #302545; }
html[data-skin="poster"] .k-form--consent .field__hint { font-size: 13px; line-height: 1.5; }
html[data-skin="poster"] .k-form--consent .check { background: #fff; border: 1px solid #b7a6da; padding: 16px; margin-top: 10px; }
html[data-skin="poster"] .k-form--consent .check__text { font-size: 15px; line-height: 1.45; }
html[data-skin="poster"] .k-form--consent .check__text small { font-size: 12px; line-height: 1.55; }
html[data-skin="poster"] .k-relay-project { margin: 18px 0 8px; font-size: clamp(21px, 2.3vw, 30px); color: #6d4cc6; }
html[data-skin="poster"] .k-relay-progress { display: inline-block; padding: 8px 12px; background: #f0eaff; border-left: 4px solid #805ff0; font-weight: 800; }
@media (max-width: 550px) {
html[data-skin="poster"] .studio--main .studio__theater-mic { width: 62%; height: 92%; top: 53%; }
html[data-skin="poster"] .studio--main .studio__theater-flower--one { width: 55px; left: 6%; top: 34%; }
html[data-skin="poster"] .studio--main .studio__theater-flower--two { width: 45px; right: 6%; bottom: 8%; }
html[data-skin="poster"] .studio--main .studio__theater-word { top: 20px; right: 20px; font-size: 15px; }
html[data-skin="poster"] .studio--main .studio__signal { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="poster"] .studio--main .studio__theater-mic,
html[data-skin="poster"] .studio--main .studio__theater-flower,
html[data-skin="poster"] .studio--main .studio__signal i { animation: none !important; }
}
/* ---------------------------------------------------------------------------
15. 인쇄
--------------------------------------------------------------------------- */
@media print {
html[data-skin="poster"] .card,
html[data-skin="poster"] .panel,
html[data-skin="poster"] .o-item,
html[data-skin="poster"] .o-section,
html[data-skin="poster"] .o-tile { border-color: #171817; box-shadow: none; }
}
/* ===========================================================================
16. 포스터 2판 — 공식 포스터(ONE-SENTENCE LABORATORY)를 60% 기준으로,
코스모스와 기존 녹음실 요소를 결합. 이 블록이 위의 규칙을 덮어쓴다.
=========================================================================== */
html[data-skin="poster"] {
--p-paper: #ffffff;
--p-cream: #fbfaf5;
--p-yellow: #ffe94a; /* 포스터 노란 띠 */
--p-marker: #fff36a; /* 형광펜 */
--p-lav: #cdbfff; /* 카드 라벤더 */
--p-lav-2: #e9e2ff;
--p-purple: #7c67ff; /* 제목 보라 */
--p-purple-2:#5b46e6;
--p-pink: #f2a2bd; /* 코스모스 */
--p-pink-2: #e07aa0;
--p-acid: var(--p-yellow);
--p-soft: var(--p-cream);
--stage: var(--p-paper);
--stage-0: var(--p-paper);
--stage-4: var(--p-cream);
--paper-2: var(--p-yellow);
--paper-3: var(--p-lav);
--p-hand: 'Nanum Pen Script', 'Nanum Pen', 'Nanum Brush Script', 'Gaegu', cursive;
--p-display: 'Noto Sans KR', 'NanumGothicExtraBold', 'Malgun Gothic', '맑은 고딕', sans-serif;
--p-cosmos: url("data:image/svg+xml;utf8,");
--p-sparkle: url("data:image/svg+xml;utf8,");
--p-sparkle-2: url("data:image/svg+xml;utf8,");
--p-wave: url("data:image/svg+xml;utf8,");
--coral: var(--p-purple);
--flower: var(--p-purple);
--sage: var(--p-purple);
--on-primary: var(--p-ink);
}
html[data-skin="poster"] body { background: var(--p-paper); }
html[data-skin="poster"] h1, html[data-skin="poster"] h2, html[data-skin="poster"] h3 { font-family: var(--p-display); font-weight: 900; }
html[data-skin="poster"] .k-mark, html[data-skin="poster"] .k-mark em { font-family: var(--p-display); font-weight: 900; }
html[data-skin="poster"] .k-mark em { color: var(--p-purple); }
html[data-skin="poster"] .index, html[data-skin="poster"] .kicker, html[data-skin="poster"] .eyebrow--coral { color: var(--p-purple-2); }
html[data-skin="poster"] .kicker::before { background: var(--p-purple); }
/* 단추: 노랑 채움 + 검은 테두리, 주 행동은 보라 채움 흰 글자 */
html[data-skin="poster"] .btn { background: var(--p-yellow); }
html[data-skin="poster"] .btn--primary { background: var(--p-purple); color: #fff; border-color: var(--p-ink); }
html[data-skin="poster"] .btn--primary .arrow { color: var(--p-yellow); }
html[data-skin="poster"] .btn--accent { background: #fff; }
html[data-skin="poster"] .quiet .arrow, html[data-skin="poster"] .quiet span { color: var(--p-purple); }
html[data-skin="poster"] .rec-toggle { background: var(--p-purple); color: #fff; border: 2px solid var(--p-ink); }
html[data-skin="poster"] .rec-toggle .rec-symbol { background: var(--p-yellow); box-shadow: 0 0 0 4px #ffffff55; }
html[data-skin="poster"] .rec-toggle[data-live="1"] { background: var(--p-yellow); color: var(--p-ink); }
html[data-skin="poster"] .rec-toggle[data-live="1"] .rec-symbol { background: var(--p-ink); }
/* 머리 · 진행 리본 */
html[data-skin="poster"] .k-head { background: #fff; }
html[data-skin="poster"] .k-step[data-state="active"] { background: var(--p-purple); color: #fff; }
html[data-skin="poster"] .k-step[data-state="active"] .k-step__n { color: var(--p-yellow); }
html[data-skin="poster"] .k-step[data-state="done"] { background: var(--p-lav-2); }
html[data-skin="poster"] .k-banner { background: var(--p-yellow); color: var(--p-ink); border-bottom: 2px solid var(--p-ink); font-weight: 700; }
/* --- 첫 화면: 포스터 히어로 -------------------------------------------- */
html[data-skin="poster"] .hero { min-height: 640px; padding-top: clamp(26px, 4vw, 56px); padding-bottom: 34px; gap: clamp(20px, 3vw, 50px); grid-template-columns: 1.05fr 1fr; }
html[data-skin="poster"] .hero__copy > .kicker,
html[data-skin="poster"] .hero__copy > h1.k-display,
html[data-skin="poster"] .hero__lead { display: none; }
html[data-skin="poster"] .hero__poster-only { display: block; }
html[data-skin="poster"] .hero__en {
display: inline-block; margin: 0; padding: 4px 14px;
font-family: var(--p-display); font-weight: 900; font-size: clamp(18px, 1.9vw, 30px); letter-spacing: -.02em; text-transform: uppercase; line-height: 1.25;
color: var(--p-ink); background: var(--p-marker); box-shadow: 8px 0 var(--p-marker), -8px 0 var(--p-marker);
transform: rotate(-.6deg);
}
html[data-skin="poster"] .hero__sub { margin: 14px 0 0; font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; letter-spacing: -.02em; color: var(--p-ink); }
html[data-skin="poster"] .hero__brand { margin: 26px 0 0; font-family: var(--p-display); font-weight: 900; font-size: clamp(84px, 9.6vw, 168px); line-height: .92; letter-spacing: -.05em; color: var(--p-ink); word-break: keep-all; }
html[data-skin="poster"] .hero__brand em { display: block; color: var(--p-purple); }
html[data-skin="poster"] .hero__quote { margin: 26px 0 0; font-family: var(--p-hand); font-size: clamp(26px, 2.4vw, 40px); line-height: 1.3; letter-spacing: -.01em; color: var(--p-ink); white-space: pre-line; max-width: 22ch; }
html[data-skin="poster"] .hero__quote::before { content: '“'; } html[data-skin="poster"] .hero__quote::after { content: '”'; }
html[data-skin="poster"] .hero__actions { margin-top: 28px; }
html[data-skin="poster"] .hero__facts { border-top: 2px solid var(--p-ink); margin-top: 30px; }
html[data-skin="poster"] .hero__facts b { font-family: var(--p-display); font-weight: 900; color: var(--p-purple); }
html[data-skin="poster"] .hero__facts b small { color: var(--p-ink); }
html[data-skin="poster"] .hero__visual { height: 600px; }
html[data-skin="poster"] .photo-mic { inset: 0; background: transparent; border: 0; transform: none; overflow: visible; }
html[data-skin="poster"] .photo-mic::before, html[data-skin="poster"] .photo-mic::after { display: none; }
html[data-skin="poster"] .photo-mic img { display: none; }
html[data-skin="poster"] .hero__mic {
display: block; position: absolute; left: 50%; top: 0; height: 100%; width: auto; max-width: none;
transform: translateX(-46%); object-fit: contain; object-position: center top; filter: drop-shadow(0 18px 24px #17181722);
z-index: 2; pointer-events: none;
}
html[data-skin="poster"] .hero__ecg { position: absolute; left: -6%; right: -6%; top: 46%; height: 60px; background: var(--p-wave) center / 100% 100% no-repeat; z-index: 1; opacity: .95; }
html[data-skin="poster"] .hero__sparkle { position: absolute; width: 74px; height: 74px; background: var(--p-sparkle) center / contain no-repeat; z-index: 3; }
html[data-skin="poster"] .hero__sparkle--1 { right: 4%; top: 2%; }
html[data-skin="poster"] .hero__sparkle--2 { right: 15%; top: 13%; width: 42px; height: 42px; background-image: var(--p-sparkle-2); }
html[data-skin="poster"] .hero__cosmos { position: absolute; background: var(--p-cosmos) center / contain no-repeat; z-index: 3; animation: cosmos-sway 6s ease-in-out infinite; }
html[data-skin="poster"] .hero__cosmos--1 { width: 96px; height: 96px; left: 4%; bottom: 20%; }
html[data-skin="poster"] .hero__cosmos--2 { width: 64px; height: 64px; right: 6%; bottom: 34%; animation-delay: -2s; }
html[data-skin="poster"] .hero__cosmos--3 { width: 44px; height: 44px; left: 22%; top: 10%; animation-delay: -4s; }
@keyframes cosmos-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
html[data-skin="poster"] .photo-flower {
display: block; width: 34%; height: 30%; right: auto; left: 0; bottom: 0;
border: 6px solid #fff; outline: 2px solid var(--p-ink); box-shadow: 6px 6px 0 var(--p-ink); background: #fff;
transform: rotate(-5deg); z-index: 4;
}
html[data-skin="poster"] .photo-flower img { display: block; }
html[data-skin="poster"] .photo-flower span { font-family: var(--p-hand); font-size: 15px; letter-spacing: 0; text-transform: none; text-shadow: none; color: #fff; background: #17181799; padding: 2px 6px; }
html[data-skin="poster"] .hero__level { display: flex; right: 0; top: auto; bottom: 8%; width: 172px; height: 44px; background: #fff; border: 2px solid var(--p-ink); box-shadow: 4px 4px 0 var(--p-ink); z-index: 4; font-weight: 700; }
html[data-skin="poster"] .hero__level .live-dot { background: var(--p-purple); box-shadow: 0 0 0 4px #7c67ff33; }
html[data-skin="poster"] .hero__stamp { display: none; }
html[data-skin="poster"] .hero__sticker { background: var(--p-yellow); right: 2%; bottom: 50%; }
html[data-skin="poster"] .hero__sticker { cursor: pointer; font-family: var(--p-display); box-shadow: 5px 6px 0 #171817; transition: scale .2s ease, box-shadow .2s ease; }
html[data-skin="poster"] .hero__sticker:hover, html[data-skin="poster"] .hero__sticker:focus-visible { scale: 1.1; box-shadow: 8px 9px 0 #171817; }
html[data-skin="poster"] .hero__sticker:focus-visible { outline: 4px solid var(--p-purple); outline-offset: 5px; }
html[data-skin="poster"] .hero__sticker:disabled { cursor: not-allowed; opacity: .6; }
html[data-skin="poster"] .hero__publish-note { max-width: 54ch; margin: 14px 0 0; font-size: 12px; font-weight: 600; line-height: 1.65; color: #4c4265; }
html[data-skin="poster"] .hero__ecg { transform-origin: center; animation: hero-wave-beat 2.8s ease-in-out infinite; }
html[data-skin="poster"] .hero__cosmos--1 { animation: cosmos-sway 5.4s ease-in-out infinite, cosmos-drift 7s ease-in-out infinite; }
html[data-skin="poster"] .hero__cosmos--2 { animation: cosmos-sway 6.7s -2s ease-in-out infinite, cosmos-drift 8.5s -1s ease-in-out infinite; }
html[data-skin="poster"] .hero__cosmos--3 { animation: cosmos-sway 5.8s -3s ease-in-out infinite, cosmos-drift 7.8s -2s ease-in-out infinite; }
@keyframes hero-wave-beat { 0%, 100% { opacity: .74; transform: scaleX(.98) translateY(0); } 44% { opacity: 1; transform: scaleX(1.04) translateY(-3px); } 58% { transform: scaleX(1) translateY(2px); } }
@keyframes cosmos-drift { 0%, 100% { margin-top: 0; } 50% { margin-top: -11px; } }
/* 여정 리본 */
html[data-skin="poster"] .journey { max-width: none; border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink); background: #fff; }
html[data-skin="poster"] .journey span { border-right: 2px solid var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .journey b { color: var(--p-purple); }
/* --- 마음 고르기: 노란 띠 --------------------------------------------- */
html[data-skin="poster"] .choose { max-width: none; background: var(--p-yellow); padding: clamp(44px, 5vw, 72px) var(--gutter); border-bottom: 2px solid var(--p-ink); }
html[data-skin="poster"] .choose > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
html[data-skin="poster"] .choose--page { background: var(--p-yellow); min-height: 0; }
html[data-skin="poster"] .section-head { margin-bottom: 28px; align-items: flex-start; }
html[data-skin="poster"] .section-head .index { color: var(--p-ink); }
html[data-skin="poster"] .section-head h2 { font-family: var(--p-display); font-weight: 900; font-size: clamp(28px, 3vw, 46px); line-height: 1.3; letter-spacing: -.04em; white-space: normal; }
html[data-skin="poster"] .section-head h2 em { color: var(--p-purple); }
html[data-skin="poster"] .section-head > p { color: var(--p-ink); font-size: 15px; font-weight: 500; max-width: 40ch; }
html[data-skin="poster"] .emotion-grid { gap: 14px; }
html[data-skin="poster"] .emotion { min-height: 150px; padding: 18px 18px 16px; background: #fff; border: 2px solid var(--p-ink); box-shadow: none; }
html[data-skin="poster"] .emotion:nth-child(2), html[data-skin="poster"] .emotion:nth-child(4),
html[data-skin="poster"] .emotion:nth-child(5), html[data-skin="poster"] .emotion:nth-child(7) { background: var(--p-lav); }
html[data-skin="poster"] .emotion:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--p-ink); border-color: var(--p-ink); }
html[data-skin="poster"] .emotion strong { margin-top: 0; font-family: var(--p-hand); font-weight: 400; font-size: 30px; letter-spacing: 0; line-height: 1.1; order: -1; }
html[data-skin="poster"] .emotion small { margin-top: auto; padding-top: 14px; font-size: 13px; opacity: 1; color: var(--p-ink); padding-right: 44px; }
html[data-skin="poster"] .emotion__n { position: absolute; top: 12px; right: 16px; color: #5d5d5d; }
html[data-skin="poster"] .emotion__icon { top: auto; bottom: 14px; right: 16px; font-size: 30px; color: var(--p-ink); font-weight: 400; }
html[data-skin="poster"] .emotion[aria-pressed="true"] { background: var(--p-purple); color: #fff; border-color: var(--p-ink); box-shadow: 5px 5px 0 var(--p-ink); }
html[data-skin="poster"] .emotion[aria-pressed="true"] small, html[data-skin="poster"] .emotion[aria-pressed="true"] .emotion__icon, html[data-skin="poster"] .emotion[aria-pressed="true"] .emotion__n { color: #fff; }
html[data-skin="poster"] .compose { background: #fff; border: 2px solid var(--p-ink); box-shadow: 6px 6px 0 var(--p-ink); }
html[data-skin="poster"] .compose__top { background: var(--p-purple); color: #fff; border-bottom: 2px solid var(--p-ink); }
html[data-skin="poster"] .compose__top i { color: var(--p-yellow); }
html[data-skin="poster"] .compose__label { color: var(--p-purple-2); }
html[data-skin="poster"] .compose__body h3 { font-family: var(--p-hand); font-weight: 400; font-size: 44px; letter-spacing: 0; line-height: 1.05; }
html[data-skin="poster"] .compose__steps span { border-top: 2px solid var(--p-ink); color: var(--p-ink); }
html[data-skin="poster"] .compose__steps span b { color: var(--p-purple); }
html[data-skin="poster"] .compose__foot { border-top: 2px solid var(--p-ink); background: var(--p-lav-2); }
html[data-skin="poster"] .compose__foot p { color: var(--p-ink); }
/* 간직하기: 공식 포스터 + 라벤더 종이 */
html[data-skin="poster"] .keep { padding-top: clamp(40px, 5vw, 70px); }
html[data-skin="poster"] .keep__image { background: var(--p-cream); border: 2px solid var(--p-ink); }
html[data-skin="poster"] .keep__image img { object-fit: contain; object-position: center; padding: 18px; }
html[data-skin="poster"] .keep__image .photo-caption { color: var(--p-ink); text-shadow: none; background: var(--p-yellow); padding: 3px 8px; border: 2px solid var(--p-ink); }
html[data-skin="poster"] .keep__copy.paper { background: var(--p-lav); color: var(--p-ink); border: 2px solid var(--p-ink); border-left: 0; }
html[data-skin="poster"] .keep__copy h2 { font-family: var(--p-display); font-weight: 900; letter-spacing: -.04em; }
html[data-skin="poster"] .keep__copy .index { color: var(--p-purple-2); }
html[data-skin="poster"] .keep__copy > p:not(.index) { color: var(--p-ink); }
html[data-skin="poster"] .keep__chips span { background: #fff; border: 2px solid var(--p-ink); }
html[data-skin="poster"] .trust { border-top: 2px solid var(--p-ink); background: #fff; color: var(--p-ink); font-weight: 600; }
html[data-skin="poster"] .trust span::before { color: var(--p-purple); }
html[data-skin="poster"] .k-foot { background: var(--p-ink); color: #fff; border-top: 0; }
html[data-skin="poster"] .k-foot .k-mark, html[data-skin="poster"] .k-foot b { color: var(--p-yellow); }
html[data-skin="poster"] .k-foot .quiet { color: #fff; border-color: #fff; }
/* --- 단계 화면: 한 화면에 들어오게 -------------------------------------- */
html[data-skin="poster"] .k-page { min-height: 0; padding-top: clamp(26px, 3.5vw, 48px); padding-bottom: 30px; gap: 18px clamp(24px, 4vw, 64px); }
html[data-skin="poster"] .k-context h1 { font-family: var(--p-display); font-weight: 900; font-size: clamp(34px, 3.6vw, 58px); line-height: 1.18; letter-spacing: -.045em; }
html[data-skin="poster"] .k-context > p:not(.index) { font-size: 16px; }
html[data-skin="poster"] .k-letterline { border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink); margin-top: 26px; }
html[data-skin="poster"] .k-letterline span { color: var(--p-purple-2); }
html[data-skin="poster"] .k-letterline strong { font-family: var(--p-hand); font-weight: 400; font-size: 32px; line-height: 1.2; letter-spacing: 0; }
html[data-skin="poster"] .k-form { background: #fff; border: 2px solid var(--p-ink); box-shadow: 8px 8px 0 var(--p-lav); }
html[data-skin="poster"] .k-form > h3 { font-family: var(--p-display); font-weight: 900; }
html[data-skin="poster"] .k-list b { color: var(--p-purple); }
html[data-skin="poster"] .k-noterow { border-top: 2px solid var(--p-ink); }
html[data-skin="poster"] .k-noterow span:nth-child(2) { color: var(--p-purple-2); }
/* 녹음실 콘솔 */
html[data-skin="poster"] .studio { border: 2px solid var(--p-ink); box-shadow: 8px 8px 0 var(--p-lav); background: #fff; min-height: 520px; }
html[data-skin="poster"] .studio__photo { background: var(--p-lav) var(--p-cosmos) center 18% / 46% no-repeat; }
html[data-skin="poster"] .studio__photo::before { content: ''; position: absolute; inset: 0; background: var(--p-cosmos) 12% 78% / 30% no-repeat, var(--p-sparkle) 78% 62% / 18% no-repeat; }
html[data-skin="poster"] .studio__photo::after { display: none; }
html[data-skin="poster"] .studio__photo img { display: none; }
html[data-skin="poster"] .studio__note { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .studio__console { background: #fff; }
html[data-skin="poster"] .console__row { color: var(--p-ink); }
html[data-skin="poster"] .console__row span:first-child { color: var(--p-purple-2); }
html[data-skin="poster"] .console__clock { font-family: var(--p-display); font-weight: 900; letter-spacing: -.06em; color: var(--p-ink); }
html[data-skin="poster"] .console__clock[data-live="1"] { color: var(--p-purple); }
html[data-skin="poster"] .console__word { font-family: var(--p-hand); font-weight: 400; letter-spacing: 0; }
html[data-skin="poster"] .console__word em { color: var(--p-purple); }
html[data-skin="poster"] .bars i { background: var(--p-purple); }
html[data-skin="poster"] .console__hint { color: var(--p-purple-2); }
/* 다시 듣고 꾸미기 */
html[data-skin="poster"] .k-take { border: 2px solid var(--p-ink); background: #fff; }
html[data-skin="poster"] .k-take__head b { color: var(--p-purple-2); }
html[data-skin="poster"] .k-headline { font-family: var(--p-hand); font-weight: 400; font-size: 30px; line-height: 1.25; background: #fff; border: 2px solid var(--p-ink); }
html[data-skin="poster"] .k-label { color: var(--p-purple-2); }
html[data-skin="poster"] .k-bg { border: 2px solid var(--p-ink); background: #fff; }
html[data-skin="poster"] .k-bg[aria-pressed="true"] { background: var(--p-purple); color: #fff; box-shadow: none; }
html[data-skin="poster"] .k-bg[aria-pressed="true"] small { color: #fff; }
html[data-skin="poster"] .k-preview { background: var(--p-lav) var(--p-cosmos) 90% 8% / 120px no-repeat; border: 2px solid var(--p-ink); box-shadow: 8px 8px 0 var(--p-ink); min-height: 560px; }
html[data-skin="poster"] .k-preview::before { content: ''; position: absolute; inset: 0; background: var(--p-cosmos) 6% 92% / 80px no-repeat, var(--p-sparkle) 92% 88% / 40px no-repeat; pointer-events: none; }
html[data-skin="poster"] .k-preview::after { display: none; }
html[data-skin="poster"] .k-preview > img { display: none; }
html[data-skin="poster"] .k-preview__label { color: var(--p-ink); text-shadow: none; font-weight: 700; }
html[data-skin="poster"] .k-preview canvas { border: 2px solid var(--p-ink); box-shadow: 8px 8px 0 var(--p-ink); width: 70%; left: 9%; top: 11%; }
/* 참여 완료: 편지 · 티켓 */
html[data-skin="poster"] .k-page--result { grid-template-columns: .9fr 1.1fr; }
html[data-skin="poster"] .k-result { min-height: 520px; display: block; position: relative; padding: 24px 0 0 6%; }
html[data-skin="poster"] .k-result__botanic { display: block; position: absolute; inset: 0 0 12% 10%; background: var(--p-lav) var(--p-cosmos) 92% 6% / 110px no-repeat; border: 2px solid var(--p-ink); }
html[data-skin="poster"] .k-result__botanic img { display: none; }
html[data-skin="poster"] .k-result__botanic::after { display: none; }
html[data-skin="poster"] .k-result__botanic > span { color: var(--p-ink); text-shadow: none; font-weight: 700; }
html[data-skin="poster"] .k-result .letter { position: relative; width: 72%; min-height: 420px; left: 0; top: 0; margin: 26px 0 0 -2%; background: #fff; border: 2px solid var(--p-ink); border-top: 12px solid var(--p-purple); box-shadow: 8px 8px 0 var(--p-ink); color: var(--p-ink); transform: rotate(-1.5deg); }
html[data-skin="poster"] .letter__head, html[data-skin="poster"] .letter__foot { color: var(--p-purple-2); border-color: var(--p-ink); }
html[data-skin="poster"] .letter__to { color: var(--p-ink); font-weight: 700; }
html[data-skin="poster"] .letter__line { font-family: var(--p-hand); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1.2; letter-spacing: 0; }
html[data-skin="poster"] .letter__wave .bars i { background: var(--p-purple); }
html[data-skin="poster"] .ticket { position: absolute; right: 0; bottom: 0; width: 40%; height: 118px; background: var(--p-yellow); border: 2px solid var(--p-ink); box-shadow: 6px 6px 0 var(--p-ink); clip-path: none; color: var(--p-ink); transform: rotate(2deg); }
html[data-skin="poster"] .ticket strong { font-family: var(--p-display); font-weight: 900; }
html[data-skin="poster"] .k-meta { border-top: 2px solid var(--p-ink); border-bottom: 2px solid var(--p-ink); }
html[data-skin="poster"] .k-meta b { color: var(--p-ink); }
html[data-skin="poster"] .k-qr.paper { background: #fff; border: 2px solid var(--p-ink); box-shadow: 6px 6px 0 var(--p-lav); }
html[data-skin="poster"] .k-page--result .k-context::before { display: none; }
html[data-skin="poster"] .k-demo-result { border: 2px solid var(--p-ink); background: #fff; }
/* 갤러리 · 운영자: 보라 강조 */
html[data-skin="poster"] .g-filter[aria-pressed="true"], html[data-skin="poster"] .o-tab[aria-selected="true"] { background: var(--p-purple); color: #fff; }
html[data-skin="poster"] .o-tile__value { color: var(--p-purple); }
html[data-skin="poster"] .g-photo--field { background: var(--p-lav) var(--p-cosmos) 80% 20% / 160px no-repeat; }
/* 화면 크기 */
@media (max-width: 1200px) {
html[data-skin="poster"] .hero { grid-template-columns: 1fr .9fr; }
html[data-skin="poster"] .hero__brand { font-size: clamp(72px, 9vw, 120px); }
html[data-skin="poster"] .hero__visual { height: 500px; }
}
@media (max-width: 760px) {
html[data-skin="poster"] .hero { padding: 26px 20px 30px; gap: 22px; min-height: 0; }
html[data-skin="poster"] .hero__en { font-size: 15px; }
html[data-skin="poster"] .hero__sub { font-size: 13px; }
html[data-skin="poster"] .hero__brand { font-size: clamp(64px, 19vw, 96px); margin-top: 18px; }
html[data-skin="poster"] .hero__quote { font-size: 24px; }
html[data-skin="poster"] .hero__visual { height: 400px; }
html[data-skin="poster"] .hero__mic { height: 100%; }
html[data-skin="poster"] .hero__cosmos--1 { width: 64px; height: 64px; }
html[data-skin="poster"] .hero__sparkle { width: 48px; height: 48px; }
html[data-skin="poster"] .photo-flower { width: 40%; height: 32%; }
html[data-skin="poster"] .hero__level { width: 150px; font-size: 9px; }
html[data-skin="poster"] .choose { padding: 44px 20px; }
html[data-skin="poster"] .section-head h2 { font-size: 26px; }
html[data-skin="poster"] .emotion { min-height: 128px; }
html[data-skin="poster"] .emotion strong { font-size: 26px; }
html[data-skin="poster"] .keep__copy.paper { border-left: 2px solid var(--p-ink); border-top: 0; }
html[data-skin="poster"] .k-result { padding: 0; }
html[data-skin="poster"] .k-result .letter { width: 84%; margin-left: 0; }
html[data-skin="poster"] .ticket { width: 46%; }
}
@media (max-height: 820px) and (min-width: 761px) {
html[data-skin="poster"] .k-noterow { display: none; }
html[data-skin="poster"] .k-page { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { html[data-skin="poster"] .hero__cosmos { animation: none; } }
/* 16-b. 제목 두 줄 · 보라 «한마디» (앞선 형광펜 규칙보다 우선) */
html[data-skin="poster"] .hero__copy h1.hero__brand { margin: 22px 0 0; font-size: clamp(96px, 10.4vw, 176px); line-height: .9; }
html[data-skin="poster"] .hero__copy h1.hero__brand em { display: block; background: none; box-shadow: none; color: var(--p-purple); }
html[data-skin="poster"] .hero__quote { max-width: none; margin-top: 22px; }
@media (max-width: 760px) { html[data-skin="poster"] .hero__copy h1.hero__brand { font-size: clamp(72px, 21vw, 104px); } }
/* 16-c. 고침: 선택 상자 흰 바탕 · 편지 미리보기 잘림 · 다시 듣기 화면 압축 */
html[data-skin="poster"] select {
background-color: #fff; color: var(--p-ink);
background-image: linear-gradient(45deg, transparent 50%, var(--p-ink) 50%), linear-gradient(135deg, var(--p-ink) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
html[data-skin="poster"] .k-preview { display: grid; place-items: center; padding: 40px 36px; min-height: 0; align-self: start; position: sticky; top: 16px; }
html[data-skin="poster"] .k-preview canvas { position: relative; inset: auto; width: 82%; left: auto; top: auto; transform: rotate(-1deg); }
html[data-skin="poster"] .k-preview__label { z-index: 2; }
html[data-skin="poster"] .k-page--even .k-context h1 { font-size: clamp(30px, 3vw, 46px); }
html[data-skin="poster"] .k-page--even .k-context > p:not(.index) { margin-top: 14px; font-size: 15px; }
html[data-skin="poster"] .k-take { margin-top: 18px !important; padding: 12px 16px; gap: 6px; }
html[data-skin="poster"] .k-take .bars { height: 40px; }
html[data-skin="poster"] .k-take audio { min-height: 40px; height: 40px; }
html[data-skin="poster"] .k-headline { min-height: 84px; font-size: 27px; padding: 12px 14px; }
html[data-skin="poster"] .k-page--even .k-actions { margin-top: 18px !important; }
html[data-skin="poster"] .k-page--even div[style*="margin-top: 28px"] { margin-top: 16px !important; }
html[data-skin="poster"] .k-page--even div[style*="margin-top: 18px"] { margin-top: 12px !important; }
html[data-skin="poster"] .k-bg { padding: 8px 12px; }
/* 16-d. 포스터 스킨에서는 마이크 그림을 다시 보이게 (녹음실 스킨 숨김 규칙보다 우선) */
html[data-skin="poster"] body.kiosk img.hero__mic { display: block; }
/* 17. 목소리 스테이지 — 정지 이미지 대신 녹음 상태에 반응하는 코스모스 */
html[data-skin="poster"] .studio--main { --rec-accent: #a98bff; grid-template-columns: 43% 57%; min-height: 590px; background: #18152a; box-shadow: 10px 10px 0 #18152a; }
html[data-skin="poster"] .studio--main[data-emotion="celebrate"] { --rec-accent: #ffbc76; }
html[data-skin="poster"] .studio--main[data-emotion="thanks"] { --rec-accent: #ffca89; }
html[data-skin="poster"] .studio--main[data-emotion="surprise"] { --rec-accent: #d6b2ff; }
html[data-skin="poster"] .studio--main[data-emotion="vent"] { --rec-accent: #a9d9ef; }
html[data-skin="poster"] .studio--main[data-emotion="cheer"] { --rec-accent: #b7e89f; }
html[data-skin="poster"] .studio--main[data-emotion="love"] { --rec-accent: #ffb5c8; }
html[data-skin="poster"] .studio--main[data-emotion="self"] { --rec-accent: #edcea3; }
html[data-skin="poster"] .studio--main[data-emotion="icheon"] { --rec-accent: #b7dac2; }
html[data-skin="poster"] .studio--main .studio__photo { background: radial-gradient(circle at 50% 47%, #4b367f 0, #272043 37%, #151325 79%); }
html[data-skin="poster"] .studio--main .studio__photo::before { display: none; }
html[data-skin="poster"] .studio--main .studio__note { color: #f6f0ff; z-index: 4; left: 24px; bottom: 23px; font-size: 10px; line-height: 1.8; }
html[data-skin="poster"] .studio__theater { position: absolute; inset: 0; overflow: hidden; color: var(--rec-accent); }
html[data-skin="poster"] .studio__theater::before { content: 'VOICE / 01'; position: absolute; left: 24px; top: 22px; font: 700 11px var(--font-mono); letter-spacing: .18em; color: #fff; }
html[data-skin="poster"] .studio__theater::after { content: ''; position: absolute; inset: 14px; border: 1px solid #ffffff55; pointer-events: none; }
html[data-skin="poster"] .studio__halo { position: absolute; width: 440px; aspect-ratio: 1; left: 50%; top: 48%; border: 1px solid #c4aff35c; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-skin="poster"] .studio__halo--two { width: 570px; border-style: dashed; opacity: .55; animation: studio-spin 32s linear infinite; }
html[data-skin="poster"] .studio__bloom { position: absolute; left: 50%; top: 48%; width: 300px; height: 300px; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 35px #0a081255); animation: studio-float 5s ease-in-out infinite; }
html[data-skin="poster"] .studio__bloom i { position: absolute; left: 50%; top: 50%; width: 68px; height: 116px; margin-left: -34px; margin-top: -58px; border-radius: 52% 52% 47% 47%; background: radial-gradient(circle at 45% 32%, #fff 0, #f6e5ff 35%, var(--rec-accent) 100%); transform: rotate(calc(var(--i) * 45deg)) translateY(-86px); box-shadow: inset -9px -12px 20px #72579b40; }
html[data-skin="poster"] .studio__core { position: absolute; left: 50%; top: 48%; width: 87px; height: 87px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff5b0, #ffe83d 46%, #b77b1d 100%); box-shadow: 0 0 0 10px #fef2b32b, 0 0 50px #ffe44399; }
html[data-skin="poster"] .studio__orbit { position: absolute; width: 15px; height: 15px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 20px #fff; }
html[data-skin="poster"] .studio__orbit--one { left: 16%; top: 25%; animation: studio-spark 2.4s ease-in-out infinite; }
html[data-skin="poster"] .studio__orbit--two { right: 17%; top: 69%; width: 11px; height: 11px; animation: studio-spark 2.4s 1s ease-in-out infinite; }
html[data-skin="poster"] .studio__theater-word { position: absolute; left: 50%; bottom: 94px; transform: translateX(-50%); white-space: nowrap; color: #fff; font-family: var(--p-display); font-size: clamp(30px, 3vw, 48px); font-weight: 900; letter-spacing: -.06em; }
html[data-skin="poster"] .studio--main .studio__console { background: #faf8ff; padding: clamp(28px, 3vw, 52px); }
html[data-skin="poster"] .studio--main .console__display { position: relative; padding: 22px 0 26px; }
html[data-skin="poster"] .studio--main .console__display::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 5px; background: var(--p-purple); }
html[data-skin="poster"] .studio--main .console__clock { font-size: clamp(72px, 8vw, 138px); letter-spacing: -.075em; line-height: .95; }
html[data-skin="poster"] .studio--main .console__clock[data-live="1"] { color: var(--p-purple); }
html[data-skin="poster"] .studio--main .console__hint { font-size: 15px; min-height: 2em; }
html[data-skin="poster"] .studio--main .rec-toggle { background: var(--p-yellow); color: var(--p-ink); min-height: 76px; border: 2px solid var(--p-ink); box-shadow: 5px 5px 0 var(--p-ink); font-size: 22px; font-weight: 900; }
html[data-skin="poster"] .studio--main .rec-toggle[data-live="1"] { background: var(--p-purple); color: #fff; }
html[data-skin="poster"] .studio--main .rec-toggle[data-live="1"] .rec-symbol { background: #fff; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__bloom { animation: studio-breathe 1.6s ease-in-out infinite; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__halo--one { animation: studio-ring 2s ease-out infinite; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__halo--two { animation-duration: 8s; }
html[data-skin="poster"] .studio--main .studio__photo { background: #fff; }
html[data-skin="poster"] .studio--main .studio__halo { display: none; }
html[data-skin="poster"] .studio--main .studio__theater-mic { display: block; position: absolute; z-index: 3; left: 50%; top: 50%; width: 100%; height: 104%; object-fit: cover; object-position: center 0; clip-path: inset(0 0 3% 0); transform: translate(-50%, -50%); animation: studio-mic-float 5s ease-in-out infinite; }
html[data-skin="poster"] .studio__theater-flower { position: absolute; z-index: 4; font-size: 58px; color: var(--rec-accent); line-height: 1; text-shadow: 0 5px 0 #110e20, 0 0 20px #fff8; animation: studio-flower-orbit 6s ease-in-out infinite; }
html[data-skin="poster"] .studio__theater-flower--one { top: 22%; left: 10%; }
html[data-skin="poster"] .studio__theater-flower--two { right: 9%; bottom: 22%; font-size: 42px; animation-delay: -2s; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__theater-mic { animation-duration: 1.8s; }
html[data-skin="poster"] .studio--main[data-live="1"] .studio__theater-flower { animation-duration: 2.7s; }
html[data-skin="poster"] .studio--main .studio__theater-word { z-index: 5; bottom: 52px; padding: 7px 15px; color: #18152a; background: var(--rec-accent); border: 2px solid #18152a; box-shadow: 4px 4px 0 #18152a; font-size: clamp(24px, 2.7vw, 42px); }
html[data-skin="poster"] .studio--main .studio__note { display: none; }
@keyframes studio-mic-float { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -53%) rotate(2deg); } }
@keyframes studio-flower-orbit { 0%, 100% { transform: translateY(0) rotate(-13deg); } 50% { transform: translateY(-18px) rotate(15deg); } }
html[data-skin="poster"] .k-palettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
html[data-skin="poster"] .k-palette { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 10px; border: 1px solid #232020; background: #fff; color: #171817; font: 700 12px var(--p-display); cursor: pointer; }
html[data-skin="poster"] .k-palette i { display: block; width: 22px; height: 22px; border: 1px solid #3334; border-radius: 50%; background: linear-gradient(135deg, var(--palette-a), var(--palette-b)); }
html[data-skin="poster"] .k-palette[aria-pressed="true"] { background: var(--p-lav); box-shadow: 3px 3px 0 var(--p-purple); }
html[data-skin="poster"] .k-palette:focus-visible { outline: 3px solid var(--p-purple); outline-offset: 2px; }
html[data-skin="poster"] .k-bgs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html[data-skin="poster"] .k-bg { min-height: 116px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; font-size: 13px; line-height: 1.2; }
html[data-skin="poster"] .k-bg i { display: block; width: 100%; height: 52px; border: 0; background: radial-gradient(circle at 75% 25%, var(--swatch-accent) 0 9%, transparent 10%), linear-gradient(130deg, var(--swatch), var(--swatch2)); }
html[data-skin="poster"] .k-bg small { margin-top: 4px; font-size: 10px; }
html[data-skin="poster"] .k-preview canvas { width: min(82%, 440px); transform: rotate(-1deg); }
html[data-skin="poster"] .k-result .k-result__art { display: block; position: relative; z-index: 3; width: 78%; height: auto; margin: 22px 0 0 -2%; border: 2px solid var(--p-ink); box-shadow: 9px 9px 0 var(--p-ink); transform: rotate(-1.5deg); }
html[data-skin="poster"] .k-result.reveal .k-result__art { animation: letter-arrive .8s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes studio-float { 50% { transform: translate(-50%, -52%) rotate(4deg); } }
@keyframes studio-breathe { 50% { transform: translate(-50%, -50%) scale(1.09) rotate(6deg); } }
@keyframes studio-ring { 0% { transform: translate(-50%, -50%) scale(.65); opacity: .8; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; } }
@keyframes studio-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes studio-spark { 50% { opacity: .25; transform: rotate(45deg) scale(.5); } }
@media (max-width: 1100px) { html[data-skin="poster"] .k-bgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
html[data-skin="poster"] .studio--main { grid-template-columns: 35% 65%; min-height: 510px; }
html[data-skin="poster"] .studio__bloom { animation: none; transform: translate(-50%, -50%) scale(.72); }
html[data-skin="poster"] .studio__theater-word { bottom: 62px; font-size: 27px; }
}
@media (max-width: 550px) {
html[data-skin="poster"] .studio--main { display: flex; flex-direction: column; }
html[data-skin="poster"] .studio--main .studio__photo { height: 280px; flex: none; }
html[data-skin="poster"] .studio__bloom { animation: none !important; transform: translate(-50%, -50%) scale(.65); }
html[data-skin="poster"] .studio__halo--one { width: 300px; }
html[data-skin="poster"] .studio__halo--two { width: 410px; }
html[data-skin="poster"] .studio__theater-word { bottom: 24px; }
html[data-skin="poster"] .studio--main .studio__note { display: none; }
html[data-skin="poster"] .studio--main .studio__console { min-height: 390px; }
html[data-skin="poster"] .k-bgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-skin="poster"] .k-result .k-result__art { width: 84%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="poster"] .studio__bloom, html[data-skin="poster"] .studio__halo,
html[data-skin="poster"] .studio__orbit, html[data-skin="poster"] .studio__theater-mic,
html[data-skin="poster"] .studio__theater-flower, html[data-skin="poster"] .hero__ecg,
html[data-skin="poster"] .hero__cosmos { animation: none !important; }
}
/* 설정 API가 실패해도 예전 어두운 스킨으로 되돌아가지 않는 준비 화면. */
html[data-skin="poster"] .k-closed--boot {
width: min(100%, 1180px);
min-height: min(70dvh, 680px);
margin: auto;
padding: clamp(28px, 5vw, 72px);
display: grid;
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
gap: clamp(28px, 6vw, 86px);
align-items: center;
text-align: left;
background: var(--p-paper);
}
html[data-skin="poster"] .k-closed__art {
width: min(100%, 360px);
aspect-ratio: 1;
display: grid;
place-items: center;
border: 3px solid var(--p-ink);
background: var(--p-lav);
box-shadow: 13px 13px 0 var(--p-ink);
color: var(--p-acid);
font: 400 clamp(170px, 25vw, 330px)/1 var(--font);
transform: rotate(-5deg);
animation: boot-flower 5s ease-in-out infinite;
}
html[data-skin="poster"] .k-closed__eyebrow {
margin: 0 0 28px;
color: var(--p-focus);
font: 700 12px/1.5 var(--font-mono);
letter-spacing: .13em;
}
html[data-skin="poster"] .k-closed--boot h1 {
max-width: 740px;
margin: 0;
font-size: clamp(42px, 6vw, 86px);
line-height: 1.07;
}
html[data-skin="poster"] .k-closed--boot .k-lead {
max-width: 560px;
margin: 28px 0 32px;
color: var(--p-muted);
font-size: clamp(16px, 1.8vw, 22px);
line-height: 1.6;
}
@keyframes boot-flower { 50% { transform: translateY(-10px) rotate(5deg); } }
@media (max-width: 760px) {
html[data-skin="poster"] .k-closed--boot { grid-template-columns: 1fr; gap: 28px; }
html[data-skin="poster"] .k-closed__art { width: min(54vw, 200px); box-shadow: 8px 8px 0 var(--p-ink); font-size: clamp(130px, 30vw, 190px); }
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="poster"] .k-closed__art { animation: none; }
}
/* ===========================================================================
18. 참가자 화면 최종 복원
---------------------------------------------------------------------------
완성 포스터의 흰 종이 · 보라 대제목 · 노란 강조 · 검은 선 체계를
첫 화면뿐 아니라 선택, 안내, 녹음, 다시 듣기, 동의, 결과까지 유지한다.
gallery/operator에는 영향을 주지 않도록 body.kiosk 아래에서만 덮어쓴다.
=========================================================================== */
html[data-skin="poster"] body.kiosk {
--participant-purple: #7860f6;
--participant-purple-deep: #5d46dd;
--participant-lavender: #c9bbff;
--participant-lavender-soft: #f1edff;
--participant-yellow: #ffea4d;
--participant-paper: #fff;
--participant-ink: #171717;
--participant-muted: #5d5a62;
background: var(--participant-paper);
}
/* 완성 시안의 보라 테두리 브랜드 바를 그대로 복원한다. */
html[data-skin="poster"] body.kiosk .k-head {
min-height: 104px;
height: auto;
padding-block: 12px;
grid-template-columns: minmax(420px, 1.15fr) auto minmax(260px, .85fr);
gap: clamp(18px, 2vw, 36px);
background: #fff;
border-bottom: 2px solid var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .k-identity {
width: min(100%, 850px);
min-height: 76px;
padding: 13px 16px;
border: 4px solid var(--participant-purple-deep);
background: #fff;
}
html[data-skin="poster"] body.kiosk .k-identity .k-mark { font-size: clamp(24px, 2vw, 34px); }
html[data-skin="poster"] body.kiosk .k-identity__sub {
color: var(--participant-ink);
border-left: 2px solid var(--participant-ink);
font-size: 11px;
letter-spacing: .18em;
}
html[data-skin="poster"] body.kiosk .k-head__center {
color: var(--participant-muted);
font-weight: 800;
}
html[data-skin="poster"] body.kiosk .k-head__center b { color: var(--participant-purple-deep); }
html[data-skin="poster"] body.kiosk .k-head__meta { gap: clamp(18px, 2.4vw, 34px); }
html[data-skin="poster"] body.kiosk .conn { font-family: var(--font-mono); letter-spacing: .11em; }
html[data-skin="poster"] body.kiosk .conn[data-state="offline"] { color: #b32020; }
html[data-skin="poster"] body.kiosk .conn[data-state="live"] .conn__dot {
background: var(--participant-purple);
box-shadow: 0 0 0 5px #7860f61f;
}
html[data-skin="poster"] body.kiosk .k-head__meta .quiet {
min-height: 45px;
padding: 8px 0;
font-size: 15px;
}
html[data-skin="poster"] body.kiosk .k-mode-nav {
display: flex;
align-items: center;
gap: 6px;
}
html[data-skin="poster"] body.kiosk .k-mode-nav.hidden { display: none; }
html[data-skin="poster"] body.kiosk .k-mode-nav a {
min-height: 38px;
display: inline-flex;
align-items: center;
padding: 7px 10px;
color: var(--participant-ink);
background: #fff;
border: 1.5px solid var(--participant-ink);
text-decoration: none;
white-space: nowrap;
font-size: 11px;
font-weight: 900;
}
html[data-skin="poster"] body.kiosk .k-mode-nav a:hover,
html[data-skin="poster"] body.kiosk .k-mode-nav a:focus-visible { background: var(--participant-lavender-soft); }
html[data-skin="poster"] body.kiosk .k-mode-nav a[aria-current="page"] {
color: #fff;
background: var(--participant-purple);
}
html[data-skin="poster"] body.kiosk .k-banner {
padding-block: 10px;
background: var(--participant-yellow);
color: var(--participant-ink);
border-bottom: 2px solid var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .k-banner--info { background: var(--participant-lavender-soft); }
/* 첫 화면 — 첨부된 완성 시안과 같은 포스터 비례. */
html[data-skin="poster"] body.kiosk .hero {
width: min(100%, 1760px);
min-height: clamp(680px, 75vh, 900px);
grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
gap: clamp(28px, 4vw, 74px);
padding: clamp(54px, 5.2vw, 92px) var(--gutter) clamp(42px, 4vw, 70px);
}
html[data-skin="poster"] body.kiosk .hero__copy { justify-content: flex-start; }
html[data-skin="poster"] body.kiosk .hero__en {
padding: 7px 17px 8px;
font-size: clamp(20px, 1.9vw, 32px);
background: var(--participant-yellow);
box-shadow: 8px 0 var(--participant-yellow), -8px 0 var(--participant-yellow);
}
html[data-skin="poster"] body.kiosk .hero__sub {
margin-top: 20px;
font-size: clamp(15px, 1.25vw, 21px);
font-weight: 900;
}
html[data-skin="poster"] body.kiosk .hero__copy h1.hero__brand {
margin-top: 34px;
font-size: clamp(100px, 10.5vw, 190px);
line-height: .88;
letter-spacing: -.09em;
}
html[data-skin="poster"] body.kiosk .hero__copy h1.hero__brand em { color: var(--participant-purple); }
html[data-skin="poster"] body.kiosk .hero__quote {
margin-top: 30px;
max-width: 25ch;
font-size: clamp(25px, 2.35vw, 41px);
line-height: 1.42;
font-weight: 700;
}
html[data-skin="poster"] body.kiosk .hero__actions { margin-top: 36px; gap: 30px; }
html[data-skin="poster"] body.kiosk .hero__actions .btn--main {
min-width: min(100%, 390px);
min-height: 82px;
justify-content: space-between;
padding-inline: 30px;
background: var(--participant-purple);
color: #fff;
font-size: clamp(18px, 1.35vw, 24px);
}
html[data-skin="poster"] body.kiosk .hero__visual { height: clamp(590px, 60vw, 740px); }
html[data-skin="poster"] body.kiosk .hero__mic {
left: 51%;
height: 103%;
transform: translateX(-46%);
filter: drop-shadow(0 24px 24px #1717171f);
}
html[data-skin="poster"] body.kiosk .hero__sticker {
width: 132px;
height: 132px;
right: 1%;
bottom: 45%;
background: var(--participant-yellow);
}
html[data-skin="poster"] body.kiosk .hero__level { bottom: 2%; }
/* 단계 리본과 모든 내부 페이지가 하나의 전시 그래픽처럼 보이도록 묶는다. */
html[data-skin="poster"] body.kiosk .k-steps {
width: min(calc(100% - (var(--gutter) * 2)), 1600px);
margin: 22px auto 0;
border: 2px solid var(--participant-ink);
box-shadow: 5px 5px 0 var(--participant-lavender);
}
html[data-skin="poster"] body.kiosk .k-step {
min-height: 68px;
border-right: 2px solid var(--participant-ink);
color: var(--participant-muted);
}
html[data-skin="poster"] body.kiosk .k-step[data-state="done"] { background: var(--participant-lavender-soft); }
html[data-skin="poster"] body.kiosk .k-step[data-state="active"] {
background: var(--participant-purple);
color: #fff;
}
html[data-skin="poster"] body.kiosk .k-step[data-state="active"] .k-step__n { color: var(--participant-yellow); }
html[data-skin="poster"] body.kiosk .k-page {
width: min(100%, 1600px);
min-height: clamp(640px, calc(100vh - 235px), 900px);
padding-top: clamp(44px, 5vw, 82px);
padding-bottom: clamp(50px, 6vw, 94px);
}
html[data-skin="poster"] body.kiosk .k-context .index {
color: var(--participant-purple-deep);
font-weight: 900;
}
html[data-skin="poster"] body.kiosk .k-context h1 {
font-size: clamp(48px, 5vw, 84px);
line-height: 1.08;
letter-spacing: -.07em;
}
html[data-skin="poster"] body.kiosk .k-context > p:not(.index) {
color: var(--participant-muted);
font-weight: 600;
}
html[data-skin="poster"] body.kiosk .k-letterline {
padding: 22px 24px;
border: 2px solid var(--participant-ink);
background: #fffbd0;
box-shadow: 6px 6px 0 var(--participant-lavender);
}
html[data-skin="poster"] body.kiosk .k-letterline span { color: var(--participant-purple-deep); }
html[data-skin="poster"] body.kiosk .k-form {
border: 2px solid var(--participant-ink);
background: #fff;
box-shadow: 8px 8px 0 var(--participant-lavender);
}
html[data-skin="poster"] body.kiosk .k-form > h3 { font-size: clamp(24px, 2vw, 34px); }
html[data-skin="poster"] body.kiosk .k-list b { color: var(--participant-purple-deep); }
html[data-skin="poster"] body.kiosk .k-list li { padding-block: 12px; }
html[data-skin="poster"] body.kiosk .k-noterow { border-top: 2px solid var(--participant-ink); }
html[data-skin="poster"] body.kiosk .k-noterow span:nth-child(2) { color: var(--participant-purple-deep); }
/* 마음 선택 화면 — 공식 포스터 하단의 8개 카드 구성을 확대한다. */
html[data-skin="poster"] body.kiosk .choose { background: var(--participant-yellow); }
html[data-skin="poster"] body.kiosk .choose--page { min-height: calc(100vh - 235px); }
html[data-skin="poster"] body.kiosk .choose--page .section-head h2 {
max-width: 22ch;
font-size: clamp(42px, 4.8vw, 78px);
line-height: 1.14;
}
html[data-skin="poster"] body.kiosk .choose--page .section-head h2 em { color: var(--participant-purple-deep); }
html[data-skin="poster"] body.kiosk .emotion {
border: 2px solid var(--participant-ink);
background: #fff;
}
html[data-skin="poster"] body.kiosk .emotion:nth-child(2),
html[data-skin="poster"] body.kiosk .emotion:nth-child(4),
html[data-skin="poster"] body.kiosk .emotion:nth-child(5),
html[data-skin="poster"] body.kiosk .emotion:nth-child(7) { background: var(--participant-lavender); }
html[data-skin="poster"] body.kiosk .emotion[aria-pressed="true"] {
background: var(--participant-purple);
color: #fff;
box-shadow: 6px 6px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .compose {
border: 2px solid var(--participant-ink);
box-shadow: 8px 8px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .compose__top { background: var(--participant-purple); }
html[data-skin="poster"] body.kiosk .compose__foot {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding: 20px 24px 24px;
background: var(--participant-lavender-soft);
}
html[data-skin="poster"] body.kiosk .compose__foot p {
max-width: 48ch;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.55;
}
html[data-skin="poster"] body.kiosk .compose__foot .btn--main {
width: 100%;
min-width: 0;
justify-content: space-between;
}
/* 참가자 진행 버튼: 단계마다 덮어쓴 노란 배경을 하나의 명확한 행동색으로 통일한다. */
html[data-skin="poster"] body.kiosk .btn--main,
html[data-skin="poster"] body.kiosk .k-form--consent .btn--block {
min-height: 76px;
padding: 18px 28px;
background: var(--participant-purple-deep);
color: #fff;
border: 2px solid var(--participant-ink);
box-shadow: 6px 6px 0 var(--participant-ink);
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 900;
line-height: 1.25;
letter-spacing: -.025em;
}
html[data-skin="poster"] body.kiosk .btn--main .arrow,
html[data-skin="poster"] body.kiosk .k-form--consent .btn--block .arrow {
color: var(--participant-yellow);
font-size: 1.25em;
}
html[data-skin="poster"] body.kiosk .btn--main:hover:not(:disabled),
html[data-skin="poster"] body.kiosk .k-form--consent .btn--block:hover:not(:disabled) {
background: #4931c2;
color: #fff;
box-shadow: 9px 9px 0 var(--participant-ink);
transform: translate(-2px, -2px);
}
html[data-skin="poster"] body.kiosk .btn--main:focus-visible,
html[data-skin="poster"] body.kiosk .k-form--consent .btn--block:focus-visible {
outline: 4px solid var(--participant-yellow);
outline-offset: 4px;
}
html[data-skin="poster"] body.kiosk .btn--main:disabled,
html[data-skin="poster"] body.kiosk .k-form--consent .btn--block:disabled {
opacity: .56;
box-shadow: none;
}
/* 녹음·다시 듣기·동의: 같은 전시 부스 색과 선 굵기를 유지한다. */
html[data-skin="poster"] body.kiosk .studio {
border: 2px solid var(--participant-ink);
box-shadow: 9px 9px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .studio--main .studio__console { background: #faf8ff; }
/* 옛 무대 규칙의 top+bottom 동시 지정이 제목 패널을 전면으로 늘리지 않게 한다. */
html[data-skin="poster"] body.kiosk .studio--main .studio__theater-word {
top: 54px;
right: 28px;
bottom: auto;
left: auto;
width: auto;
height: auto;
max-width: calc(100% - 56px);
white-space: normal;
text-align: right;
transform: none;
font-size: clamp(18px, 2vw, 28px);
}
html[data-skin="poster"] body.kiosk .studio--main .studio__theater-mic {
width: 88%;
height: 86%;
object-fit: contain;
object-position: center;
clip-path: none;
}
html[data-skin="poster"] body.kiosk .studio--main .studio__theater-flower { display: block; }
html[data-skin="poster"] body.kiosk .studio--main .rec-toggle {
background: var(--participant-yellow);
color: var(--participant-ink);
border: 2px solid var(--participant-ink);
box-shadow: 5px 5px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .studio--main .rec-toggle[data-live="1"] {
background: var(--participant-purple);
color: #fff;
}
html[data-skin="poster"] body.kiosk .k-take,
html[data-skin="poster"] body.kiosk details.k-details,
html[data-skin="poster"] body.kiosk .k-headline,
html[data-skin="poster"] body.kiosk .k-bg { border: 2px solid var(--participant-ink); }
html[data-skin="poster"] body.kiosk .k-preview {
background-color: var(--participant-lavender-soft);
border: 2px solid var(--participant-ink);
box-shadow: 9px 9px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .k-preview canvas { box-shadow: 8px 8px 0 var(--participant-ink); }
html[data-skin="poster"] body.kiosk .k-form--consent {
background: var(--participant-lavender-soft);
box-shadow: 9px 9px 0 var(--participant-lavender);
}
html[data-skin="poster"] body.kiosk .k-consent-head > span,
html[data-skin="poster"] body.kiosk .k-relay-project { color: var(--participant-purple-deep); }
/* 완료 화면도 포스터와 같은 작품 카드·노란 티켓으로 마무리한다. */
html[data-skin="poster"] body.kiosk .k-result__botanic {
background-color: var(--participant-lavender-soft);
border: 2px solid var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .k-result .k-result__art {
border: 2px solid var(--participant-ink);
box-shadow: 10px 10px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .ticket {
background: var(--participant-yellow);
border: 2px solid var(--participant-ink);
box-shadow: 6px 6px 0 var(--participant-ink);
}
html[data-skin="poster"] body.kiosk .k-qr.paper {
border: 2px solid var(--participant-ink);
box-shadow: 6px 6px 0 var(--participant-lavender);
}
html[data-skin="poster"] body.kiosk .k-foot {
color: #fff;
background: var(--participant-ink);
border-top: 0;
}
html[data-skin="poster"] body.kiosk .k-foot .k-mark,
html[data-skin="poster"] body.kiosk .k-foot .k-mark em,
html[data-skin="poster"] body.kiosk .k-foot .quiet { color: #fff; }
html[data-skin="poster"] body.kiosk .k-foot .quiet { border-color: #fff; }
html[data-skin="poster"] body.kiosk .k-foot .arrow { color: var(--participant-yellow); }
html[data-skin="poster"] body.kiosk .k-foot .k-mode-nav a {
color: #fff;
background: transparent;
border-color: #fff;
}
html[data-skin="poster"] body.kiosk .k-foot .k-mode-nav a:hover,
html[data-skin="poster"] body.kiosk .k-foot .k-mode-nav a:focus-visible { color: var(--participant-ink); background: var(--participant-yellow); }
html[data-skin="poster"] body.kiosk .k-foot .k-mode-nav a[aria-current="page"] {
color: var(--participant-ink);
background: var(--participant-yellow);
}
@media (max-width: 1100px) {
html[data-skin="poster"] body.kiosk .k-head { grid-template-columns: minmax(330px, 1fr) auto; }
html[data-skin="poster"] body.kiosk .k-head__center { display: none; }
html[data-skin="poster"] body.kiosk .hero {
grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
min-height: 650px;
}
html[data-skin="poster"] body.kiosk .hero__copy h1.hero__brand { font-size: clamp(88px, 11vw, 128px); }
html[data-skin="poster"] body.kiosk .hero__visual { height: 570px; }
html[data-skin="poster"] body.kiosk .k-mode-nav--head { display: none; }
}
@media (max-width: 760px) {
html[data-skin="poster"] body.kiosk .k-head {
min-height: 78px;
padding: 8px 18px;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
}
html[data-skin="poster"] body.kiosk .k-identity {
width: auto;
min-height: 56px;
padding: 8px 10px;
border-width: 3px;
}
html[data-skin="poster"] body.kiosk .k-identity .k-mark { font-size: 21px; }
html[data-skin="poster"] body.kiosk .k-head__meta { gap: 12px; }
html[data-skin="poster"] body.kiosk .conn { font-size: 9px; }
html[data-skin="poster"] body.kiosk .k-head__meta .quiet { min-height: 36px; font-size: 11px; }
html[data-skin="poster"] body.kiosk .k-mode-nav--foot { width: 100%; flex-wrap: wrap; }
html[data-skin="poster"] body.kiosk .k-mode-nav--foot a { flex: 1 1 8rem; justify-content: center; }
html[data-skin="poster"] body.kiosk .hero {
display: flex;
min-height: 0;
padding: 42px 20px 36px;
gap: 26px;
}
html[data-skin="poster"] body.kiosk .hero__en { font-size: 17px; }
html[data-skin="poster"] body.kiosk .hero__copy h1.hero__brand {
margin-top: 25px;
font-size: clamp(75px, 22vw, 108px);
}
html[data-skin="poster"] body.kiosk .hero__quote { font-size: 24px; }
html[data-skin="poster"] body.kiosk .hero__actions { margin-top: 27px; gap: 16px; }
html[data-skin="poster"] body.kiosk .hero__actions .btn--main { min-width: 100%; min-height: 66px; }
html[data-skin="poster"] body.kiosk .hero__visual { height: 430px; }
html[data-skin="poster"] body.kiosk .hero__sticker { width: 98px; height: 98px; }
html[data-skin="poster"] body.kiosk .k-steps { width: calc(100% - 38px); box-shadow: 4px 4px 0 var(--participant-lavender); }
html[data-skin="poster"] body.kiosk .k-step { min-height: 54px; }
html[data-skin="poster"] body.kiosk .k-page { min-height: 0; padding: 38px 20px 64px; }
html[data-skin="poster"] body.kiosk .k-context h1 { font-size: clamp(42px, 10vw, 66px); }
html[data-skin="poster"] body.kiosk .k-letterline { padding: 18px; box-shadow: 5px 5px 0 var(--participant-lavender); }
html[data-skin="poster"] body.kiosk .choose--page { min-height: 0; }
html[data-skin="poster"] body.kiosk .choose--page .section-head h2 { font-size: clamp(39px, 9vw, 58px); }
html[data-skin="poster"] body.kiosk .emotion strong { font-size: 25px; }
html[data-skin="poster"] body.kiosk .k-preview { position: relative; top: auto; width: 100%; }
html[data-skin="poster"] body.kiosk .studio--main .studio__theater-word {
top: 16px;
right: 16px;
max-width: 60%;
font-size: 18px;
}
}
@media (max-width: 470px) {
html[data-skin="poster"] body.kiosk .k-head__meta .conn { display: none; }
html[data-skin="poster"] body.kiosk .hero__visual { height: 370px; }
html[data-skin="poster"] body.kiosk .hero__mic { height: 100%; }
html[data-skin="poster"] body.kiosk .hero__copy h1.hero__brand { font-size: clamp(69px, 21vw, 88px); }
html[data-skin="poster"] body.kiosk .hero__facts { grid-template-columns: 1fr 1fr 1fr; }
html[data-skin="poster"] body.kiosk .emotion-grid { gap: 10px; }
html[data-skin="poster"] body.kiosk .emotion { min-height: 150px; }
html[data-skin="poster"] body.kiosk .emotion strong { font-size: 21px; }
html[data-skin="poster"] body.kiosk .compose { box-shadow: 5px 5px 0 var(--participant-ink); }
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="poster"] body.kiosk .hero__mic,
html[data-skin="poster"] body.kiosk .hero__ecg,
html[data-skin="poster"] body.kiosk .hero__cosmos { animation: none !important; }
}