/* 고객사 발표용 A/B 시안 대시보드 · ADR-0053 */
:root{
  --dash-accent:var(--coral-500);
  --dash-accent-strong:var(--coral-600);
  --dash-ink:var(--navy-900);
  --dash-ink-soft:var(--blue-900);
  --dash-paper:var(--gray-50);
  --dash-surface:var(--gray-0);
  --dash-line:var(--gray-200);
  --dash-muted:var(--gray-600);
  --dash-inverse:var(--gray-50);
  --dash-shadow:0 18px 50px color-mix(in srgb,var(--dash-ink) 14%,transparent);
}
html,body{min-height:100%}
body{background:var(--dash-paper);color:var(--dash-ink);overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:300;background:var(--dash-ink);color:var(--dash-inverse);padding:10px 16px}
.proposal{min-height:100dvh;position:relative;padding-bottom:30px}
.proposal::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:var(--dash-accent)}
.proposal-header{min-height:104px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-block:20px;border-bottom:1px solid var(--dash-line)}
.proposal-brand{display:flex;flex:0 0 320px;align-items:center;gap:18px;min-width:0}
.proposal-brand img{display:block;width:clamp(112px,13vw,170px);height:auto}
.proposal-brand span{font-family:"Inter Variable",sans-serif;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--dash-muted);white-space:nowrap}
.proposal-meta{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:var(--dash-muted);white-space:nowrap}
.proposal-intro{margin-top:0;padding-top:clamp(52px,7vw,96px)}
.proposal-kicker{display:flex;align-items:center;gap:14px;color:var(--dash-accent-strong);font-size:14px;font-weight:780}
.proposal-index{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--dash-accent);font-size:12px}
.proposal-intro h1{margin:18px 0 22px;max-width:13ch;font-size:clamp(42px,6.4vw,82px);line-height:1.06;letter-spacing:-.052em;font-weight:790}
.proposal-intro>p{margin:0;max-width:660px;color:var(--dash-muted);font-size:clamp(16px,1.5vw,20px);line-height:1.7}
.proposal-legend{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.proposal-legend span{border:1px solid var(--dash-line);background:var(--dash-surface);padding:7px 12px;font-size:12px;font-weight:700}
.concept-section{margin-top:0;padding-top:clamp(70px,8vw,112px)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:24px}
.section-heading span{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dash-accent-strong)}
.section-heading h2{margin:4px 0 0;font-size:clamp(24px,3vw,36px);letter-spacing:-.035em}
.section-heading p{margin:0;color:var(--dash-muted);font-size:14px}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.concept-card{appearance:none;text-align:left;border:1px solid var(--dash-line);background:var(--dash-surface);padding:0;cursor:pointer;min-width:0;box-shadow:0 1px 0 color-mix(in srgb,var(--dash-ink) 4%,transparent);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.concept-card:hover{border-color:var(--dash-accent);box-shadow:var(--dash-shadow)}
.concept-card:focus-visible{outline:3px solid var(--dash-accent);outline-offset:4px}
.concept-card.is-pending{cursor:default}
.concept-card.is-pending:hover{border-color:var(--dash-line);box-shadow:0 1px 0 color-mix(in srgb,var(--dash-ink) 4%,transparent)}
.concept-card.is-pending .concept-cover img{filter:saturate(.72) contrast(.92)}
.concept-cover{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--dash-ink)}
.concept-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:filter var(--dur-slow) var(--ease-out)}
.concept-card:hover .concept-cover img{filter:saturate(1.06) contrast(1.02)}
.concept-letter{position:absolute;left:20px;top:20px;display:grid;place-items:center;width:48px;height:48px;background:var(--dash-surface);color:var(--dash-ink);font-size:20px;font-weight:850;border:1px solid var(--dash-line)}
.concept-status{position:absolute;right:20px;top:20px;background:color-mix(in srgb,var(--dash-ink) 82%,transparent);color:var(--dash-inverse);padding:7px 10px;font-size:11px;font-weight:750;letter-spacing:.04em;white-space:nowrap}
.concept-body{display:block;padding:24px}
.concept-name-row{display:flex;align-items:start;justify-content:space-between;gap:18px}
.concept-body h3{margin:0;font-size:26px;line-height:1.25;letter-spacing:-.03em}
.concept-body h3 small{display:block;margin-top:4px;font-family:"Inter Variable",sans-serif;font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--dash-accent-strong)}
.concept-arrow{font-family:"Inter Variable",sans-serif;font-size:26px;line-height:1;color:var(--dash-accent-strong)}
.concept-body>p{min-height:52px;margin:14px 0 18px;color:var(--dash-muted);font-size:14px;line-height:1.65}
.concept-tags{display:flex;flex-wrap:wrap;gap:8px}
.concept-tags span{background:var(--dash-paper);border:1px solid var(--dash-line);padding:5px 9px;font-size:11px;font-weight:720}
.proposal-footer{margin-top:80px;border-top:1px solid var(--dash-line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--dash-muted);font-size:11px}
.proposal-footer p{margin:0}

.viewer{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--dash-paper);color:var(--dash-ink)}
.viewer::backdrop{background:var(--dash-ink)}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.viewer-bar{min-height:76px;padding:10px clamp(12px,2vw,28px);display:flex;align-items:center;gap:clamp(10px,1.7vw,24px);border-bottom:1px solid var(--dash-line);background:var(--dash-surface);overflow-x:auto}
.viewer-close{appearance:none;border:0;background:none;padding:10px 6px;cursor:pointer;font-size:13px;font-weight:800;white-space:nowrap}
.viewer-close:hover{color:var(--dash-accent-strong)}
.viewer-name{display:flex;align-items:center;gap:10px;min-width:180px}
.viewer-code{display:grid;place-items:center;width:34px;height:34px;background:var(--dash-ink);color:var(--dash-inverse);font-size:13px;font-weight:850}
.viewer-name strong{display:block;font-size:14px;line-height:1.2}
.viewer-name span:last-child{display:block;font-family:"Inter Variable",sans-serif;font-size:10px;line-height:1.4;color:var(--dash-muted);white-space:nowrap}
.concept-switch,.device-switch{display:flex;align-items:center;border:1px solid var(--dash-line);padding:3px;background:var(--dash-paper)}
.concept-switch{margin-left:auto}
.concept-switch button,.device-switch button{appearance:none;border:0;background:transparent;padding:7px 12px;cursor:pointer;font-size:12px;font-weight:800;white-space:nowrap}
.concept-switch button[aria-pressed="true"],.device-switch button[aria-pressed="true"]{background:var(--dash-ink);color:var(--dash-inverse)}
.concept-switch button:disabled{color:var(--dash-muted);cursor:not-allowed;opacity:.52}
.device-switch button{display:flex;align-items:center;gap:6px}
.device-switch small{opacity:.68}
.open-window{color:var(--dash-ink);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;border-bottom:1px solid currentColor}
.viewer-stage{min-height:0;overflow:auto;padding:clamp(10px,2vw,26px);display:block;background:var(--dash-ink)}
.device-frame{background:var(--dash-surface);box-shadow:var(--dash-shadow);overflow:hidden;transition:width var(--dur-slow) var(--ease-out)}
.device-desktop{width:1920px;max-width:none;height:calc(100dvh - 128px);margin-inline:auto}
.device-mobile{width:min(375px,calc(100vw - 24px));height:calc(100dvh - 128px);margin-inline:auto}
.browser-chrome{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--dash-line);background:var(--dash-paper);color:var(--dash-muted);font-size:10px}
.browser-chrome i{display:block;width:7px;height:7px;border-radius:50%;background:var(--gray-300)}
.browser-chrome i:first-child{background:var(--dash-accent)}
.browser-chrome span{margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device-frame iframe{display:block;width:100%;height:calc(100% - 34px);border:0;background:var(--dash-surface)}