/* 「나는 어떤 고전 인물일까?」 /games/classic-character/ */
.cc-page { width: min(100% - 32px, 1120px); margin: 0 auto; padding-bottom: clamp(40px, 6vw, 72px); }
.cc-page [hidden] { display: none !important; }

/* ---------- 시작 ---------- */
.cc-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(32px, 6vw, 80px) 0 clamp(24px, 4vw, 40px); }
.cc-intro h1 { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.02em; word-break: keep-all; }
.cc-motto { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1; margin-top: 10px; color: var(--text-2); }
.cc-lead { margin-top: 22px; font-size: 1.06rem; line-height: 1.75; color: var(--text-2); max-width: 34em; word-break: keep-all; }
.cc-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.cc-start-note { font-size: .9rem; color: var(--text-3); }
.cc-cast { margin-top: 26px; font-size: .88rem; line-height: 1.7; color: var(--text-3); max-width: 36em; word-break: keep-all; }
.cc-cast span { color: var(--text-2); }

.cc-hosts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; margin: 0; }
.cc-host { position: relative; display: grid; justify-items: center; gap: 10px; }
.cc-host img { width: 100%; max-width: 300px; height: auto; filter: drop-shadow(0 18px 30px rgb(var(--shade-rgb) / .28)); }
.cc-host.is-xync img { max-width: 286px; }
.cc-bubble { order: -1; position: relative; font-size: .92rem; line-height: 1.5; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); color: var(--text); max-width: 15em; word-break: keep-all; }
.cc-host.is-ether .cc-bubble { border-color: rgb(var(--ether-rgb) / .45); }
.cc-host.is-xync .cc-bubble { border-color: rgb(var(--xync-rgb) / .45); }
.cc-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--card); border-right: 1px solid; border-bottom: 1px solid; border-color: inherit; }

/* ---------- 문항 ---------- */
.cc-play { max-width: 720px; margin: 0 auto; padding: clamp(20px, 4vw, 48px) 0 8px; }
.cc-play.is-in .cc-q, .cc-play.is-in .cc-opts, .cc-play.is-in .cc-hostline { animation: cc-in var(--d-3) var(--ease-expo) both; }
.cc-play.is-in .cc-opts { animation-delay: 60ms; }
@keyframes cc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cc-play-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.cc-back { min-height: 44px; padding: 0 12px; margin-left: -12px; }
.cc-step { margin-left: auto; font-family: var(--f-mono); font-size: .85rem; color: var(--text-3); }
.cc-bar { position: relative; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 8px; }
.cc-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--ether), var(--xync)); border-radius: inherit; transition: transform var(--d-3) var(--ease-expo); }
.cc-hostline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.cc-hostline img { width: 76px; height: 76px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: var(--card-2); border: 2px solid var(--line-2); flex: none; }
.cc-hostline.is-ether img { border-color: rgb(var(--ether-rgb) / .55); }
.cc-hostline.is-xync img { border-color: rgb(var(--xync-rgb) / .55); }
.cc-hostline p { font-size: .95rem; line-height: 1.5; color: var(--text-2); padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--card); border: 1px solid var(--line); word-break: keep-all; }
.cc-q { margin-top: 22px; font-family: var(--f-display); font-weight: var(--w-display-strong); font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.35; letter-spacing: -0.02em; word-break: keep-all; }
.cc-q:focus, .cc-q:focus-visible { outline: none; }
.cc-opts { display: grid; gap: 10px; margin-top: 22px; }
.cc-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; text-align: left; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: inherit; font-size: 1.02rem; line-height: 1.45; cursor: pointer; transition: border-color var(--d-2), background-color var(--d-2), transform var(--d-2) var(--ease-expo); -webkit-tap-highlight-color: transparent; }
.cc-opt:hover { border-color: rgb(var(--ether-rgb) / .6); background: var(--card); }
.cc-opt:active { transform: scale(.99); }
.cc-opt.is-on { border-color: var(--ether); background: var(--ether-dim); }
.cc-opt-t { min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.cc-key { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: .8rem; color: var(--text-2); }
.cc-opt.is-on .cc-key { background: var(--ether); border-color: var(--ether); color: var(--ether-ink); }

/* ---------- 결과 ---------- */
.cc-result { padding: clamp(20px, 4vw, 48px) 0 0; }
.cc-sharedbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; margin-bottom: 24px; border-radius: var(--r-md); border: 1px solid rgb(var(--ether-rgb) / .35); background: var(--ether-dim); }
.cc-sharedbar p { font-size: .96rem; color: var(--text); word-break: keep-all; }
.cc-res-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 28px clamp(28px, 5vw, 64px); align-items: start; }
.cc-res-grid > * { grid-column: 1; min-width: 0; }
.cc-share { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(var(--header-h) + 20px); }
.cc-kicker { font-size: .95rem; font-weight: 650; color: var(--mint-ink); }
.cc-name { margin-top: 6px; font-family: var(--f-display); font-weight: var(--w-display-strong); font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: -0.025em; word-break: keep-all; }
html[lang="en"] .cc-name { font-family: var(--f-display-latin); font-weight: 400; letter-spacing: -0.01em; }
.cc-name:focus { outline: none; }
.cc-tag { margin-top: 10px; font-size: 1.15rem; font-weight: 650; color: var(--coral-ink); word-break: keep-all; }
.cc-from { margin-top: 6px; font-size: .95rem; color: var(--text-3); }
.cc-portrait { font-size: 1.08rem; line-height: 1.8; color: var(--text); max-width: 36em; word-break: keep-all; }
.cc-quote { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--line-2); }
.cc-quote blockquote { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.75; color: var(--text); word-break: keep-all; }
.cc-quote blockquote[lang="en"] { font-family: var(--f-serif); font-style: italic; font-size: 1.32rem; line-height: 1.45; }
.cc-quote blockquote p + p { margin-top: 4px; }
.cc-quote figcaption { margin-top: 10px; font-size: .86rem; color: var(--text-3); }
.cc-says { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-say { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); }
.cc-say img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: var(--card-2); }
.cc-say p { font-size: .95rem; line-height: 1.6; color: var(--text-2); word-break: keep-all; }
.cc-say b { display: block; margin-bottom: 4px; font-size: .86rem; color: var(--mint-ink); }
.cc-say.is-xync b { color: var(--coral-ink); }
.cc-mates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-mates h3, .cc-share h3, .cc-all h3 { font-size: .9rem; font-weight: 650; color: var(--text-2); margin-bottom: 8px; }
.cc-mate { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: border-color var(--d-2), background-color var(--d-2); }
.cc-mate:hover { border-color: var(--line-2); background: var(--panel); }
.cc-mate img { width: 52px; height: 78px; object-fit: cover; border-radius: 4px; background: var(--card-2); }
.cc-mate-t { display: grid; gap: 2px; min-width: 0; }
.cc-mate-t b { font-size: 1rem; word-break: keep-all; }
.cc-mate-t small { font-size: .8rem; color: var(--text-3); }
.cc-mate-t span { margin-top: 4px; font-size: .88rem; line-height: 1.5; color: var(--text-2); word-break: keep-all; }
.cc-read { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line-2); }
.cc-cover { width: 96px; height: 144px; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-1); background: var(--card-2); }
.cc-read-t { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.cc-read-btn { white-space: normal; text-align: center; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; max-width: 100%; }
.cc-read-t p { font-size: .88rem; line-height: 1.6; color: var(--text-3); word-break: keep-all; }
.cc-card-prev { position: relative; aspect-ratio: 1080 / 1350; border-radius: var(--r-md); overflow: hidden; background: var(--card-2); border: 1px solid var(--line); }
.cc-card-prev img, .cc-card-prev .skeleton { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cc-share-btns .btn { flex: 1 1 auto; min-height: 46px; }
.cc-again { margin-top: clamp(36px, 6vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 22px; justify-items: start; }
.cc-all ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cc-all a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-2); text-decoration: none; font-size: .9rem; }
.cc-all a:hover { color: var(--text); border-color: var(--line-input); }
.cc-all a[aria-current] { color: var(--ether-ink); background: var(--ether); border-color: var(--ether); }

.cc-made { margin-top: clamp(32px, 5vw, 48px); font-size: .82rem; line-height: 1.65; color: var(--text-3); max-width: 46em; word-break: keep-all; }
.cc-made a { color: var(--text-2); }

/* 친구가 보낸 결과로 들어오면 첫 화면이 깜빡이지 않게 */
html.cc-shared .cc-intro { display: none; }

@media (max-width: 900px) {
  .cc-res-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-share { grid-column: 1; grid-row: auto; position: static; }
  .cc-card-prev { max-width: 360px; }
}
@media (max-width: 760px) {
  .cc-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
  .cc-hosts { order: -1; max-width: 280px; justify-self: center; }
  .cc-bubble { display: none; }
  .cc-says, .cc-mates { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .cc-read { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .cc-cover { width: 72px; height: 108px; }
  .cc-opt { font-size: .98rem; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-play.is-in .cc-q, .cc-play.is-in .cc-opts, .cc-play.is-in .cc-hostline { animation: none; }
  .cc-bar i, .cc-opt { transition: none; }
}
.cc-page[data-screen="play"] .cc-made { max-width: 720px; margin-left: auto; margin-right: auto; }