/* 축구토토 승무패 조합 생성기(/toto/) 전용 스타일.
   공통 토큰·타이포는 /assets/base.css, 상단바는 공통 GNB(/tools/assets/tools.css 의 .tkbar)를 쓴다.
   2026-08-24 에 서비스 페이지들과 같은 GNB 로 합치면서 전용 .tnav 규칙은 없앴다. */

/* ── 페이지 폭·헤더 ── */
/* 폭은 공통 GNB(.tkbar-in, 940px)와 같아야 한다 — 로또와 같은 이유(2026-08-24 정리). */
.twrap{max-width:940px;margin:0 auto;padding:0 22px}
@media(max-width:560px){.twrap{padding:0 16px}}
.tmain{padding:30px 0 8px}
/* base.css 의 section{padding:64px 0} 이 새로 만든 <section> 에 딸려온다 — 전부 상쇄한다. */
.tmain section{padding:0}

/* ── 생성 컨트롤 ── */
.gen-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--light);border:1px solid #D8E3F7;border-radius:14px;padding:14px 16px;margin-bottom:18px}
.gen-copy{flex:1 1 320px;min-width:0}
.gen-bar p{margin:0;font-size:13.2px;line-height:1.55;color:var(--gray)}
.gen-bar strong{color:var(--deep)}
.gen-bar a{color:var(--blue);font-weight:700}
.gen-sub{margin-top:3px;font-size:12.3px;line-height:1.55;color:var(--muted)}
.btn-gen{flex-shrink:0;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:11px 20px;
  font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-gen:hover{background:var(--blue-d)}
.btn-gen:active{transform:translateY(1px)}
@media(max-width:560px){.gen-bar{gap:12px}.btn-gen{width:100%;padding:12px 20px}}

/* ── 조합 카드 ── */
.sets{display:flex;flex-direction:column;gap:12px}
.set{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  box-shadow:0 8px 22px -18px rgba(10,21,38,.5)}
.set-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.set-no{width:24px;height:24px;border-radius:8px;background:var(--deep);color:#fff;font-size:12px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-name{font-size:15px;font-weight:800;color:var(--deep)}
.set-tag{font-size:11.5px;font-weight:700;color:var(--blue);background:var(--light);
  border-radius:999px;padding:4px 10px}
.set-desc{font-size:13px;line-height:1.55;color:var(--gray);margin:0 0 12px}

/* 14경기는 7칸씩 두 줄로 그린다. 한 줄 14칸으로 두면 320px 화면에서 글자가 읽히지 않는다. */
.picks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:min(8px,2vw)}
.pick{border-radius:10px;padding:5px 0 6px;text-align:center;line-height:1.15;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.09)}
.pk-no{display:block;font-size:10px;font-weight:700;color:rgba(21,30,46,.55);letter-spacing:-.2px}
.pk-v{display:block;font-size:clamp(15px,4.4vw,18px);font-weight:800;color:#151E2E;letter-spacing:-.5px}
.pick.v0{background:#6AA6F2}  /* 승 */
.pick.v1{background:#FBC400}  /* 무 */
.pick.v2{background:#FF7272}  /* 패 */

.set-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.chip{font-size:12px;color:var(--gray);background:#F5F7FB;border-radius:8px;padding:5px 10px;font-weight:600}
.set-acts{margin-left:auto;display:flex;gap:8px}
.mini{background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 13px;font-family:inherit;
  font-size:12.5px;font-weight:700;color:#33405A;cursor:pointer;transition:.15s}
.mini:hover{border-color:var(--blue);color:var(--blue)}
.mini.done{border-color:var(--blue);color:var(--blue);background:var(--light)}
.mini.danger:hover{border-color:#E0575A;color:#E0575A}
@media(max-width:430px){
  .set-acts{margin-left:0;width:100%}
  .mini{flex:1;padding:7px 6px;font-size:12px}
}

/* ── 게임 전환 탭 ────────────────────────────────────────
   축구토토 승무패와 야구토토 승1패는 구조가 같아 한 화면에서 다룬다. 가운데 칸 이름만
   다르다(무 / 1). 발매 중인 게임이 하나뿐이어도 "지금 뭘 보고 있는지" 알려주려고 항상 그린다. */
.gtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.gtabs[hidden]{display:none}
.gtab{flex:1 1 190px;min-width:0;text-align:left;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px;transition:.15s}
.gtab:hover{border-color:var(--blue-surface)}
.gtab.on{border-color:var(--blue);background:var(--light);box-shadow:inset 0 0 0 1px var(--blue)}
.gt-name{display:block;font-size:14px;font-weight:800;color:var(--deep);letter-spacing:-.3px}
.gtab.on .gt-name{color:var(--blue-d)}
.gt-sub{display:block;font-size:11.8px;font-weight:600;color:var(--muted);margin-top:2px}
@media(max-width:520px){.gtab{flex:1 1 100%;padding:10px 13px}}

/* 저장 목록에서 "어느 게임 어느 회차로 뽑았는지" — 회차가 지나도 남으므로 꼭 보여준다. */
.set-src{font-size:11.5px;font-weight:600;color:var(--muted);margin-left:auto}
@media(max-width:520px){.set-src{margin-left:0;width:100%}}

/* 대상경기 목록의 리그 표시(MLB, EPL…) */
.rl-lg{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  background:#F5F7FB;border-radius:5px;padding:1px 5px;margin-left:3px}

/* ── "이거 어떻게 쓰나요" 3단계 ──────────────────────────
   조합만 던져놓으니 "그래서 뭘 하라는 거냐"가 됐다(2026-08-23 사장님 지적).
   실제 절차는 판매점에서 슬립지를 받아 손으로 옮겨 칠하는 것이라, 그 순서를 먼저 보여준다. */
.howto{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;
  box-shadow:0 8px 22px -18px rgba(10,21,38,.5)}
.howto h2{font-size:16px;font-weight:850;color:var(--deep);margin:0 0 12px;letter-spacing:-.3px}
.howto ol{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.howto li{counter-increment:step;position:relative;padding-left:32px;font-size:13.6px;line-height:1.6;color:var(--gray)}
.howto li::before{content:counter(step);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:7px;
  background:var(--blue);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.howto li b{color:var(--deep)}
.howto-alt{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.6px;line-height:1.65;color:var(--muted)}
.howto-alt b{color:var(--deep)}
.howto-alt a{color:var(--blue);font-weight:700}

/* ── 마킹표(슬립지 모양) ────────────────────────────────
   판매점 슬립지는 1번부터 14번까지 세로로 내려간다. 카드의 가로 7×2 배열은 한눈에 보기엔 좋지만
   슬립지와 모양이 달라 옮겨 칠할 때 줄을 놓친다. 그래서 같은 조합을 세로로도 볼 수 있게 한다. */
.slip{margin-top:12px;padding-top:12px;border-top:1px dashed #D8E3F7}
.slip[hidden]{display:none}
.slip-tip{margin:0 0 10px;font-size:12.4px;line-height:1.6;color:var(--muted)}
.slip-tip b{color:var(--deep)}
.slip table{border-collapse:collapse;width:100%;max-width:392px;margin:0 auto}
.slip th,.slip td{padding:4px 3px;text-align:center}
.slip thead th{font-size:11px;font-weight:800;color:var(--muted);padding-bottom:6px;
  border-bottom:1px solid var(--line)}
/* 팀명이 들어오면 이 칸이 제일 넓어야 한다. 38px 로 두면 '에버턴 / vs / 크리스털' 로
   세 줄이 나서 표가 세로로 길어진다(2026-08-23 확인). */
.slip thead th:first-child{width:108px;text-align:left;padding-left:2px}
.slip tbody tr+tr td{border-top:1px solid #F1F4F9}
.slip .sl-no{font-size:12px;font-weight:800;color:var(--deep);text-align:left;padding-left:2px;
  vertical-align:middle}
.slip .sl-team{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1.3;
  word-break:break-all;overflow-wrap:anywhere}
.slip .sl-cell{font-size:12.5px;font-weight:800;color:#C7D0DD;
  border:1px solid var(--line);border-radius:7px;padding:5px 0;max-width:56px;margin:0 auto}
.slip .sl-cell.on{color:#151E2E;border-color:transparent;box-shadow:inset 0 -3px 0 rgba(0,0,0,.09)}
.slip .sl-cell.on.v0{background:#6AA6F2}
.slip .sl-cell.on.v1{background:#FBC400}
.slip .sl-cell.on.v2{background:#FF7272}

/* ── 회차 안내 바 ── */
.round-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;
  box-shadow:0 8px 22px -18px rgba(10,21,38,.5)}
.round-bar h2{font-size:15px;font-weight:800;color:var(--deep);margin:0 0 4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.round-badge{font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:-.2px}
.round-badge.open{background:#E4F5E9;color:#1E7F42}
.round-badge.closed{background:#F1F4F9;color:#8698B3}
.round-bar p{margin:0;font-size:12.8px;line-height:1.6;color:var(--gray)}
.round-list{list-style:none;margin:11px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:5px 14px}
.round-list li{font-size:12.6px;color:var(--gray);display:flex;gap:7px}
.round-list b{color:var(--deep);font-weight:800;flex-shrink:0;width:20px;text-align:right}

/* ── 마킹 계산기 ── */
.mark{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 4px 10px;overflow-x:auto}
.mark table{border-collapse:collapse;width:100%;min-width:300px;max-width:520px;margin:0 auto}
/* 880px 본문 폭에 표를 꽉 채우면 버튼 사이가 너무 벌어져 어느 줄인지 눈이 못 따라간다. */
.mark th,.mark td{padding:6px 3px;text-align:center;font-size:13px}
.mark thead th{font-size:12px;font-weight:800;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px}
/* 팀명이 들어오는 칸이라 넉넉해야 한다. 44px 로 두면 375px 화면에서 세 줄로 접히고
   .mark 가 가로 스크롤을 만든다(2026-08-23 확인). */
.mark thead th:first-child{width:124px}
.mark tbody tr+tr td{border-top:1px solid #F1F4F9}
.mark .mk-no{font-size:12.5px;font-weight:800;color:var(--deep)}
.mark tbody td:first-child{text-align:left;padding-left:4px}
.mark .mk-team{font-size:11px;font-weight:600;color:var(--muted);display:block;line-height:1.3;margin-top:1px;
  word-break:break-all;overflow-wrap:anywhere}
.mk-btn{width:100%;max-width:64px;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:8px 0;font-family:inherit;font-size:13.5px;font-weight:800;color:#8698B3;cursor:pointer;transition:.12s}
.mk-btn:hover{border-color:var(--blue-surface);color:#33405A}
.mk-btn.on{color:#151E2E;border-color:transparent;box-shadow:inset 0 -3px 0 rgba(0,0,0,.09)}
.mk-btn.on.v0{background:#6AA6F2}
.mk-btn.on.v1{background:#FBC400}
.mk-btn.on.v2{background:#FF7272}

.calc{position:sticky;bottom:0;z-index:5;margin-top:14px;
  background:var(--deep);color:#fff;border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap}
.calc-fig{display:flex;align-items:baseline;gap:7px}
.calc-fig .k{font-size:12.5px;color:#A9BCD9;font-weight:600}
.calc-fig .v{font-size:20px;font-weight:900;letter-spacing:-.5px}
.calc-fig .v.over{color:#FF9C9C}
.calc-note{flex:1 1 100%;font-size:12.3px;line-height:1.55;color:#A9BCD9;margin:0}
.calc-note.over{color:#FFC4C4;font-weight:700}
.calc-acts{margin-left:auto;display:flex;gap:8px}
.calc-acts .mini{background:transparent;border-color:rgba(255,255,255,.28);color:#E7EEF9}
.calc-acts .mini:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
@media(max-width:560px){
  .calc{padding:12px 14px;gap:6px 14px}
  .calc-fig .v{font-size:18px}
  .calc-acts{margin-left:0;width:100%}
  .calc-acts .mini{flex:1}
}

/* ── 내 조합 ── */
.saved-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:34px 0 12px}
.saved-head h2{font-size:19px;font-weight:850;color:var(--deep);margin:0;letter-spacing:-.4px}
.saved-head .count{font-size:12.8px;color:var(--muted);font-weight:600}
.empty{background:#F8FAFD;border:1px dashed #D8E3F7;border-radius:14px;padding:26px 20px;text-align:center;
  font-size:13.5px;color:var(--gray)}

/* ── 안내 문구 ── */
.notice{background:#F8FAFD;border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  font-size:12.6px;line-height:1.75;color:var(--gray);margin:20px 0 0}
.notice b{color:var(--deep)}
.notice a{color:var(--blue);font-weight:700}

/* ── 안내 페이지(guide) 본문 ── */
.doc h2{font-size:21px;font-weight:850;color:var(--deep);margin:34px 0 10px;letter-spacing:-.4px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:16px;font-weight:800;color:var(--deep);margin:22px 0 7px}
.doc p{font-size:14.5px;line-height:1.8;color:var(--gray);margin:0 0 12px}
.doc b{color:var(--deep)}
.doc a{color:var(--blue);font-weight:700}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc li{font-size:14.5px;line-height:1.8;color:var(--gray);margin-bottom:5px}
.tablewrap{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;min-width:420px;background:#fff}
.doc th,.doc td{padding:10px 12px;font-size:13.4px;text-align:right;white-space:nowrap}
.doc th{background:#F5F7FB;font-weight:800;color:var(--deep);font-size:12.8px}
.doc th:first-child,.doc td:first-child{text-align:left}
.doc tbody tr+tr th,.doc tbody tr+tr td{border-top:1px solid var(--line)}
.doc td b{font-weight:800}
.doc .hl{background:#FFFBEC}
.callout{background:var(--light);border:1px solid #D8E3F7;border-radius:14px;padding:16px 18px;margin:0 0 18px}
.callout p{margin:0;font-size:13.6px;line-height:1.75}
.callout p+p{margin-top:8px}

/* ── 하단 CTA·푸터 (로또와 동일 구조) ── */
@media(max-width:640px){
      }

/* 소제목 앞 아이콘 — 서비스 페이지와 같은 모양(공통 .tkico 사용). */
.twrap h2, .tmain h2{display:flex;align-items:center;gap:9px}
.twrap h2 .tkico, .tmain h2 .tkico{color:var(--blue);font-size:19px}