/* ============================================================
   pages/more/page.css — 더 보기

   ⭐ **이 파일은 이 화면 안쪽만 건드린다.** 다른 레일에는 영향이 없다.
   공용(토큰 · 표 · 알약 · 버튼 · 글꼴 · 색)은 styles/ 가 갖는다. 여기서는 그것을 물려받고
   이 화면에만 필요한 것만 덧쓴다. 그래서 이 화면을 고칠 때 다른 화면을 볼 일이 없다.

   @scope .place-page[data-place="more"], .mg-, .lk-
   ⚠️ 위 @scope 는 약속이 아니라 검사 대상이다 — 여기 적힌 것에 걸리지 않는 셀렉터를 쓰면
      tests/test_pages.js 가 실패한다. 공용 규칙을 여기서 덮어쓰지 못하게 막는 장치다.
   ============================================================ */

/* 아직 `더 보기` 화면 자체의 전용 규칙은 없다. 아래는 작은 도구 창의 모양이다. */

/* ============================================================
   사다리타기 · 점심 룰렛 · 제비뽑기
   ⭐ 색과 크기는 전부 토큰에서 온다. 여기서 새 색을 만들지 않는다.
   ============================================================ */
.mg-modal{
  position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.45);
}
.mg-dlg{
  /* 206차 — 더 큰 화면으로(880px → 1040px) · 사용성 개선 요구 */
  width:min(1040px, 96vw); max-height:92vh; display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 18px 48px rgba(15,23,42,.28);
}
.mg-h{ display:flex; align-items:center; gap:var(--sp-3); padding:12px 16px;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line); }
.mg-h b{ font-size:var(--fs-4); font-weight:800; color:var(--text); }
.mg-sp{ flex:1; }
.mg-x{ width:24px; height:24px; cursor:pointer; font-family:inherit; font-size:var(--fs-2);
  color:var(--muted); background:none; border:0; border-radius:var(--radius-sm); }
.mg-x:hover{ background:var(--row-hover); color:var(--text); }
.mg-tabs{ display:flex; gap:4px; }
.mg-t{
  height:26px; padding:0 12px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-2); font-weight:700; color:var(--muted);
  background:var(--sk-bg2); border:0; border-radius:var(--radius-full);
}
.mg-t:hover{ background:var(--row-hover); color:var(--text); }
.mg-t.on{ background:var(--primary); color:#fff; }

.mg-b{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px;
  padding:18px 20px; overflow:auto; }
@media (max-width:900px){ .mg-b{ grid-template-columns:minmax(0,1fr); } }
.mg-in{ display:flex; flex-direction:column; gap:10px; }
.mg-f{ display:flex; align-items:center; gap:var(--sp-2); padding:12px 16px;
  border-top-width:1px; border-top-style:solid; border-top-color:var(--line); }
.mg-msg{ flex:1; font-size:var(--fs-2); color:var(--muted); }

.mg-fd label{ display:block; font-size:var(--fs-2); font-weight:700; color:var(--text); margin:0 0 4px; }
.mg-fd textarea{
  width:100%; min-height:104px; padding:8px 9px; resize:vertical;
  font-family:inherit; font-size:var(--fs-3); line-height:1.7; color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.mg-fd input{
  width:100%; height:30px; padding:0 9px; font-family:inherit; font-size:var(--fs-3);
  color:var(--text); background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--radius-sm);
}
.mg-fd textarea:focus, .mg-fd input:focus{ border-color:var(--primary); }
.mg-hint{ font-size:var(--fs-1); color:var(--muted); margin-top:4px; line-height:1.6; }
.mg-pick{ display:flex; gap:5px; flex-wrap:wrap; }
.mg-pick button{
  height:26px; padding:0 10px; cursor:pointer; font-family:inherit;
  font-size:var(--fs-2); font-weight:700; color:var(--muted);
  background:var(--sk-bg2); border:0; border-radius:var(--radius-full);
}
.mg-pick button:hover{ background:var(--row-hover); color:var(--text); }
/* 206차 — 인사정보에서 고르기가 더 눈에 띄도록(쉬운 길을 도드라지게) */
.mg-pick button.hi{ background:var(--primary); color:#fff; }
.mg-pick button.hi:hover{ background:var(--primary-press); color:#fff; }

/* 사다리 */
.mg-out{ min-height:320px; display:flex; flex-direction:column; gap:12px; }
.mg-svg{ width:100%; height:320px; background:var(--sk-bg2); border-radius:var(--radius-sm); }
.mg-line{ stroke:var(--line); stroke-width:3; fill:none; stroke-linecap:round; }
.mg-path{ stroke:var(--primary); stroke-width:4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mg-cap{ font-size:var(--fs-3); font-weight:700; fill:var(--text); text-anchor:middle; }
.mg-cap.res{ fill:var(--muted); }
.mg-cap.res.hit{ fill:var(--primary); font-weight:800; }
.mg-res{ display:flex; flex-direction:column; gap:3px; }
.mg-r{ display:flex; align-items:center; gap:8px; padding:5px 9px;
  background:var(--sk-bg2); border-radius:var(--radius-sm); font-size:var(--fs-3); }
.mg-r b{ font-weight:800; color:var(--text); }
.mg-r i{ font-style:normal; color:var(--muted); }
.mg-r em{ font-style:normal; margin-left:auto; font-weight:800; color:var(--primary); }
/* 206차 — 당첨 줄을 따로 도드라지게(사다리·룰렛·제비뽑기 공통) */
.mg-r.hit{ background:var(--primary-light); }
.mg-r.hit b{ color:var(--primary); }
.mg-empty{ padding:40px 0; text-align:center; font-size:var(--fs-3); color:var(--muted); line-height:1.8; }

/* ⭐ 206차 — 결과를 크게 보여주는 자리(셋이 함께 쓴다). opacity·scale 만 트랜지션 시켜
   튀어 오르듯 보이게 한다(@keyframes 는 test_pages.js 의 셀렉터 검사에 걸린다 — page.js 머리글 참조). */
.mg-big{
  min-height:56px; display:flex; align-items:center; justify-content:center;
  padding:4px 10px; font-size:var(--fs-9); font-weight:800; color:var(--primary);
  text-align:center; line-height:1.25; word-break:keep-all;
  opacity:0; transform:scale(.55);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .35s;
}
.mg-big.show{ opacity:1; transform:scale(1); }

/* 룰렛 — 바퀴를 SVG 파이 조각으로 그린다(글자를 얹기 위해). 색 조각·바늘의 뜻은 그대로다. */
.mg-wheel-w{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.mg-wheel{ position:relative; width:300px; height:300px; }
.mg-dial{ width:100%; height:100%; border-radius:var(--radius-full); overflow:hidden;
  transition:transform 3.4s cubic-bezier(.15,.75,.15,1); }
.mg-wheel-svg{ width:100%; height:100%; display:block; }
.mg-slice{ stroke:#fff; stroke-width:1.5; }
.mg-slice-t{ font-size:var(--fs-1); font-weight:800; fill:#fff; text-anchor:middle;
  dominant-baseline:middle; paint-order:stroke; stroke:rgba(15,23,42,.35); stroke-width:2px; }
.mg-needle{ position:absolute; left:50%; top:-6px; margin-left:-9px;
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:18px solid var(--text); }

/* ---------- 바로가기 편집 ----------
   창 껍데기는 미니게임 창(.mg-)과 같은 것을 쓴다. 여기서는 안쪽 줄만 정한다.
   ⚠️ 격자 칸은 기본이 min-width:auto 라 입력칸이 칸을 밀어낸다(RULES 6-2). min-width:0 을 둔다. */
.lk-hint{ margin:0 0 10px; font-size:var(--fs-2); color:var(--muted); line-height:1.7; }
.lk-list{ display:flex; flex-direction:column; gap:6px; }
.lk-row{ display:grid; grid-template-columns:1fr 2fr 28px 28px 28px; gap:6px; align-items:center; }
.lk-row > *{ min-width:0; }
.lk-n, .lk-u{
  height:30px; padding:0 8px; font-family:inherit; font-size:var(--fs-2); color:var(--text);
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--radius-sm);
}
.lk-b{
  height:28px; border:0; background:none; cursor:pointer; border-radius:var(--radius-sm);
  font-size:var(--fs-2); color:var(--muted);
}
.lk-b:hover:not(:disabled){ background:var(--row-hover); color:var(--text); }
.lk-b:disabled{ opacity:.35; cursor:default; }
.lk-b.dan{ color:var(--accent3); }
.lk-act{ display:flex; gap:6px; margin-top:10px; }