/* ════════════════════════════════════════════════════════════════
   level-ladder.css — LEVEL-LADDER-1(2026-09-08): 「이야기 창작 3단계 사다리」 공용 스타일.
   ─────────────────────────────────────────────────────────────────
   쓰는 곳: judge.html(심사위원 체험 안내·정보용) + maker.html ptype 화면(단계 고르는 버튼 = 같은 카드).
   사용자 결정 09-08: "인포그래픽이 마음에 드니 단계 고르는 칸도 그걸로" — 한 벌의 CSS를 두 화면이 공유해
   문구·모양이 어긋나지 않게 한다. 카드가 <button>일 때(.lv__card--btn) 초기화·hover·이전 선택 배지 규칙 추가.
   태블릿(768~1024)은 3열 유지·글자만 살짝 축소, 760 이하는 1열.
   ════════════════════════════════════════════════════════════════ */
.lv { margin:4px 0 4px; padding:14px 14px 12px; border:1.5px solid rgba(160,120,70,0.28); border-radius:14px; background:linear-gradient(180deg,#fffdf7,#fff6e6); text-align:left; }
.lv__head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.lv__title { font-family:'Jua', sans-serif; font-size:19px; color:#2b1f10; }
.lv__sub { font-size:12.5px; color:#8a6a45; margin-top:2px; }
.lv__legend { display:flex; gap:12px; font-size:12px; color:#5a4630; }
.lv__legend span { display:inline-flex; align-items:center; gap:5px; }
.lv__dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.lv__dot--ai { background:repeating-linear-gradient(135deg,#6f8fd8 0 3px,#dfe6f7 3px 5px); }
.lv__dot--kid { background:#e08a4a; }
.lv__cols { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
/* 카드 = 세로 flex. 행 목록(.lv__rows)이 남는 높이를 먹어서 '이야기 구조' 상자와 선택 띠가 세 카드에서 같은 높이에 온다(사용자 09-08 '통일성'). */
.lv__card { background:#fff; border-radius:12px; overflow:hidden; min-width:0; box-shadow:0 4px 14px rgba(120,80,30,0.10); padding:0 0 10px; position:relative; font-family:'Nanum Gothic','Apple SD Gothic Neo',sans-serif; color:#3a2a16; display:flex; flex-direction:column; }
.lv__band { display:flex; align-items:center; gap:8px; padding:9px 10px; color:#fff; min-height:54px; box-sizing:border-box; }
.lv__card--1 .lv__band { background:linear-gradient(135deg,#f0a35e,#e07a3c); }
.lv__card--2 .lv__band { background:linear-gradient(135deg,#8fb56a,#5f9448); }
.lv__card--3 .lv__band { background:linear-gradient(135deg,#6f8fd8,#4b67b8); }
.lv__num { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22); border:2px solid rgba(255,255,255,.55); display:inline-flex; align-items:center; justify-content:center; font-family:'Jua', sans-serif; font-size:16px; flex:none; }
.lv__band b { display:block; font-family:'Jua', sans-serif; font-size:16px; font-weight:400; line-height:1.15; }
.lv__band small { display:block; font-size:11px; opacity:.95; margin-top:2px; }
.lv__motto { padding:9px 10px 2px; font-family:'Jua', sans-serif; font-size:14.5px; color:#3a2a16; }
.lv__motto em { font-style:normal; color:#c66f4a; }
.lv__ratio { margin:7px 10px 8px; height:18px; border-radius:9px; overflow:hidden; display:flex; font-size:10.5px; font-weight:700; color:#fff; }
.lv__ratio-ai { background:repeating-linear-gradient(135deg,#6f8fd8 0 6px,#a9bbe8 6px 10px); display:flex; align-items:center; padding-left:8px; text-shadow:0 0 3px #4b67b8; white-space:nowrap; }
.lv__ratio-kid { flex:1; background:#e08a4a; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; white-space:nowrap; }
.lv__ratio-lab { display:flex; justify-content:space-between; gap:8px; margin:-4px 10px 8px; font-size:11px; color:#7a6650; }
.lv__rows { list-style:none; margin:0 8px; padding:0; display:flex; flex-direction:column; gap:5px; flex:1 0 auto; }
.lv__rows li { display:flex; gap:6px; align-items:flex-start; background:#fbf6ec; border-radius:9px; padding:8px 9px; font-size:13.5px; line-height:1.5; color:#3a2a16; min-width:0; }
.lv__rows b { color:#8a6a45; margin-right:3px; }
.lv__ic { font-size:15px; line-height:1.2; flex:none; }
.lv__who { display:inline-block; font-style:normal; font-size:10.5px; font-weight:800; border-radius:5px; padding:1px 5px; margin-left:3px; vertical-align:1px; }
.lv__who--ai { background:#e3eafc; color:#3d55a3; border:1px dashed #6f8fd8; }
.lv__who--kid { background:#fde5d2; color:#a5521f; }
.lv__who--both { background:#e9f3df; color:#3f6f2a; }
.lv__path { margin:8px 8px 0; flex:none; border:2px dashed #e5d7bf; border-radius:10px; padding:7px 8px 6px; text-align:center; }
.lv__path b { display:block; font-size:12px; color:#8a6a45; margin-bottom:4px; }
.lv__path svg { display:block; margin:0 auto; max-width:100%; height:auto; }
.lv__bar { margin-top:10px; height:32px; border-radius:16px; background:linear-gradient(90deg,#6f8fd8 0%,#8fb56a 50%,#e08a4a 100%); display:flex; align-items:center; justify-content:space-between; padding:0 14px; color:#fff; font-family:'Jua', sans-serif; font-size:13px; gap:8px; }
.lv__foot { margin-top:8px; font-size:12.5px; color:#6b5638; line-height:1.5; }

/* ── 버튼 카드(maker ptype) ── */
/* ⚠️ <button>은 내용을 세로 가운데 정렬한다(브라우저 기본) → 카드 높이가 다르면 짧은 카드의 띠가 아래로 내려가 위아래가 어긋남(사용자 09-08). flex 세로 배치로 위 정렬 + 선택 띠는 맨 아래 고정. */
button.lv__card { appearance:none; -webkit-appearance:none; border:2px solid transparent; cursor:pointer; text-align:left; width:100%; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; margin:0; transition:transform 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms, border-color 180ms; }
button.lv__card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(120,80,30,0.16); }
button.lv__card:focus-visible { outline:3px solid rgba(198,111,74,0.45); outline-offset:2px; }
button.lv__card .lv__band { padding-right:76px; min-height:54px; }   /* 이전 선택 배지 자리·세 카드 띠 높이 통일 */
button.lv__card .lv__pick { display:block; margin:0 8px; flex:none; text-align:center; font-family:'Jua', sans-serif; font-size:14px; color:#fffaee; background:#c66f4a; border-radius:999px; padding:8px 12px; }
button.lv__card .lv__path { margin-bottom:10px; }
button.lv__card--1 .lv__pick { background:#e07a3c; } button.lv__card--2 .lv__pick { background:#5f9448; } button.lv__card--3 .lv__pick { background:#4b67b8; }
button.lv__card.previously-selected { border-color:#c66f4a; box-shadow:0 0 0 3px rgba(198,111,74,0.18), 0 4px 16px rgba(120,90,50,0.12); }
button.lv__card .ptype-card-prev-badge { top:10px; right:10px; }

/* ── 반응형: 태블릿은 3열 유지(글자 축소), 760 이하 1열 ── */
@media (max-width:1024px) {
  .lv__rows li { font-size:12.5px; padding:7px 8px; }
  .lv__band b { font-size:15px; }
  .lv__motto { font-size:13.5px; }
}
@media (max-width:760px) {
  .lv__cols { grid-template-columns:1fr; }
  .lv__rows li { font-size:13.5px; }
  .lv__band b { font-size:16px; }
  .lv__bar { height:auto; padding:8px 12px; flex-wrap:wrap; justify-content:center; text-align:center; }
}