/* ─────────────────────────────────────────────────────────────────────────
   인비트윈 서비스(/tools/, /lotto/, /toto/) 공통 스타일
   ─────────────────────────────────────────────────────────────────────────
   색·타이포 토큰은 /assets/base.css 를 그대로 쓴다. 여기에는 서비스 페이지에만
   필요한 것 — GNB, 아이콘, 카드·폼 위젯, 결과 블록 — 만 둔다.

   접두사는 전부 `tk`(toolkit). 서비스마다 같은 역할의 클래스를 새로 만들지 말고
   여기 있는 걸 쓸 것. 아래 목록이 "비슷한 자리는 비슷하게" 를 지키는 기준이다.

     .tkhead   결과 맨 위 큰 블록 (배지 + 큰 숫자/제목 + 한 줄 설명)
     .tkh      카드 안 소제목 (앞에 아이콘 하나)
     .tklead   소제목 밑 설명 문단
     .tkrow    라벨 + 값 한 줄
     .tknote   안내 상자 (plain / warn / alert)
     .tkfaq    접었다 펴는 설명
     .tkcta    맨 아래 상담 유도 블록
     .tkerr    폼 입력 오류 문구

   ⚠ 본문 타이포(.tkmain > .tkwrap > h2/h3/p)는 **직계 선택자**다. 되돌리지 말 것 —
     `.tkmain p` 처럼 통째로 걸면 특정도(0,0,1,1)가 서비스별 클래스(0,0,1,0)를 이겨서
     카드 안에서 크게 띄우려던 글자가 조용히 14.5px 로 줄어든다(2026-08-24 에 겪음).
   ⚠ base.css 의 `section{padding:64px 0}` 이 새 <section> 에 딸려온다 → .tkmain section{padding:0}
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --tk-line:#E5E9F0;
  --tk-line-soft:#EEF2F8;
  --tk-surface:#FBFCFE;
  --tk-shadow:0 10px 30px -22px rgba(10,21,38,.55);
  --tk-shadow-lift:0 18px 40px -24px rgba(10,21,38,.6);
  --tk-radius:16px;
}

/* ── 아이콘 ────────────────────────────────────────────────────────────────
   SVG 를 마스크로 깔고 배경을 currentColor 로 칠한다. 그래서 글자 색만 바꾸면
   아이콘 색도 따라오고, 외부 파일이나 스크립트가 필요 없다(정적 페이지라 중요하다).
   쓰는 법: <span class="tkico tkico-shield" aria-hidden="true"></span> */
.tkico{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;
  background-color:currentColor;
  -webkit-mask:var(--tkico) center/contain no-repeat;
          mask:var(--tkico) center/contain no-repeat}
.tkico-scale   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M7 20h10M6 7l12-2'/><path d='M6 7l-3 6a3 3 0 006 0zM18 5l3 6a3 3 0 01-6 0z'/></svg>")}
.tkico-shield  {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v6c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z'/></svg>")}
.tkico-alert   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4.3L2.6 18a1.7 1.7 0 001.5 2.6h15.8A1.7 1.7 0 0021.4 18L13.7 4.3a1.7 1.7 0 00-3 0z'/><path d='M12 9.5v4M12 17.5h.01'/></svg>")}
.tkico-calendar{--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2.5'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>")}
.tkico-clock   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5.2l3.2 1.9'/></svg>")}
.tkico-spark   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.2 6.3L20.5 11l-6.3 1.7L12 19l-2.2-6.3L3.5 11l6.3-1.7z'/></svg>")}
.tkico-heart   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.2S4.5 15.6 4.5 10.4A3.9 3.9 0 0112 8.2a3.9 3.9 0 017.5 2.2c0 5.2-7.5 9.8-7.5 9.8z'/></svg>")}
.tkico-users   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M2.8 20c0-3.2 2.8-5.2 6.2-5.2s6.2 2 6.2 5.2'/><path d='M17 5.6a3 3 0 010 5.8M18.5 20c0-2.2-.7-3.8-2-4.8'/></svg>")}
.tkico-chart   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20.5h18M6.5 20.5v-6M12 20.5V6M17.5 20.5v-9'/></svg>")}
.tkico-check   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6.5L9.2 17.3 4 12.1'/></svg>")}
.tkico-info    {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11.2v5M12 7.8h.01'/></svg>")}
.tkico-doc     {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7.5A2.5 2.5 0 005 5.5v13A2.5 2.5 0 007.5 21h9a2.5 2.5 0 002.5-2.5V8z'/><path d='M14 3v5h5M8.5 13h7M8.5 16.5h4.5'/></svg>")}
.tkico-target  {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='4.5'/><circle cx='12' cy='12' r='.9' fill='black' stroke='none'/></svg>")}
.tkico-arrow   {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 12h14M13 6l6 6-6 6'/></svg>")}
.tkico-chev    {--tkico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>")}

/* ── 1단 GNB ───────────────────────────────────────────────────────────────
   [로고] 서비스▾ | 현재 서비스의 페이지들 … [로그인] [상담]
   현재 서비스의 페이지 메뉴(.tkbar-sub)가 옆에 붙고, 자리가 모자라면 그 줄만 가로로 스크롤된다. */
.tkbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tk-line)}
.tkbar-in{max-width:940px;margin:0 auto;padding:0 22px;min-height:64px;display:flex;align-items:center;gap:12px}
.tkbar-logo img{height:32px;width:auto;display:block}

.tkbar-nav{position:relative;margin-left:4px}
.tkbar-toggle{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:15px;font-weight:700;
  color:#33405A;background:none;border:none;cursor:pointer;padding:8px 6px;border-radius:9px}
.tkbar-toggle:hover{color:var(--blue)}
.tkbar-toggle svg{width:11px;height:11px;transition:transform .18s}
.tkbar-toggle[aria-expanded="true"]{color:var(--blue)}
.tkbar-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

.tkdrop{position:absolute;top:calc(100% + 10px);left:-8px;z-index:70;width:min(92vw,420px);
  background:#fff;border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:8px;
  box-shadow:0 22px 46px -24px rgba(10,21,38,.55)}
.tkdrop[hidden]{display:none}
.tkdrop-group + .tkdrop-group{margin-top:4px;padding-top:8px;border-top:1px solid var(--tk-line)}
.tkdrop-label{font-size:11.5px;font-weight:800;letter-spacing:.6px;color:var(--muted);
  text-transform:uppercase;padding:8px 10px 4px;margin:0}
.tkdrop a{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:11px;transition:.13s}
.tkdrop a:hover{background:var(--light)}
.tkdrop a[aria-current="true"]{background:var(--light)}
.tkdrop-ico{font-size:17px;line-height:1.3;flex-shrink:0}
.tkdrop-nm{font-size:14.5px;font-weight:700;color:var(--deep);display:block}
.tkdrop-ds{font-size:12.2px;color:var(--gray);display:block;margin-top:1px;line-height:1.45}
.tkdrop-all{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--blue);
  padding:10px;border-radius:11px;margin-top:4px;background:var(--light)}

/* 현재 서비스의 페이지들 */
.tkbar-div{width:1px;align-self:stretch;margin:14px 2px;background:var(--tk-line);flex-shrink:0}
.tkbar-sub{display:flex;align-items:center;gap:16px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tkbar-sub::-webkit-scrollbar{display:none}
.tkbar-sub a{font-size:14.5px;font-weight:600;color:#33405A;white-space:nowrap;padding:6px 0}
.tkbar-sub a:hover{color:var(--blue)}
.tkbar-sub a[aria-current="page"]{color:var(--blue);font-weight:800}
/* 넘칠 때만 오른쪽 끝을 흐리게 — tools.js 가 클래스를 붙인다. */
.tkbar-sub.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}

.tkbar-cta{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.tkbar-cta > a{background:var(--blue);color:#fff;font-size:14.5px;font-weight:800;border-radius:11px;
  padding:11px 20px;display:inline-block;white-space:nowrap;transition:.15s}
.tkbar-cta > a:hover{background:var(--blue-d)}
.tkbar-cta .short{display:none}

@media(max-width:720px){
  .tkbar-in{gap:8px;flex-wrap:wrap;row-gap:0}
  .tkbar-sub{gap:14px;min-width:max-content;max-width:100%;flex:1 1 auto}
  .tkbar-sub a{font-size:13.5px}
}
/* 메뉴가 아랫줄로 내려간 상태 — tools.js 의 syncBar 가 붙인다.
   메뉴만 통째로 둘째 줄을 쓰고, 로그인·상담 버튼은 첫 줄에 그대로 남는다.
   (flex-wrap 에만 맡기면 상담 버튼까지 밀려 세 줄이 된다.) */
.tkbar-in.is-stacked{padding-bottom:6px}
.tkbar-in.is-stacked .tkbar-cta{order:2}
.tkbar-in.is-stacked .tkbar-sub{order:3;flex-basis:100%;width:100%;padding-top:2px}
.tkbar-in.is-stacked .tkbar-div{display:none}
@media(max-width:560px){
  /* 320px 에서 로고+서비스+로그인+상담 이 한 줄에 들어가야 한다(3px 모자라 상담이 밀렸었다).
     로그인 버튼이 있는 로또가 가장 빡빡한 경우다 — 여기 값을 바꾸면 /lotto/ 를 320px 로 확인할 것. */
  .tkbar-in{min-height:58px;gap:6px;padding:0 12px}
  .tkbar-logo img{height:22px}
  .tkbar-toggle{font-size:13.5px;padding:8px 2px;gap:4px}
  .tkbar-cta .full{display:none}
  .tkbar-cta .short{display:inline}
  .tkbar-cta > a{padding:8px 12px;font-size:13px}
  .tkbar-sub{gap:12px}
  .tkbar-sub a{font-size:13px}
  /* .tkdrop 은 .tkbar-nav(로고 옆의 좁은 토글 컨테이너, 폭 50px 안팎) 기준으로 절대배치된다.
     좁은 화면에서 폭 360px짜리 패널을 그 옆에 붙이면 화면 밖으로 밀려난다 — nav를 static으로
     풀어 기준을 .tkbar(헤더 전체, position:sticky라 컨테이닝 블록이 된다)까지 올린다.
     saju 앱의 global.css [data-rs="svc-drop"] 620px 구간과 같은 해법. */
  .tkbar-nav{position:static}
  .tkdrop{left:12px;right:12px;width:auto;top:calc(100% + 6px)}
}

/* ── 페이지 골격 ───────────────────────────────────────────────────────── */
.tkwrap{max-width:940px;margin:0 auto;padding:0 22px}
@media(max-width:560px){.tkwrap{padding:0 16px}}

/* 히어로 — 어두운 바탕에 은은한 빛 두 덩이와 점 패턴을 깐다. */
/* GNB 바로 밑에 붙으면 답답해 보여서 흰 여백을 한 칸 둔다.
   사주(saju-compass/global.css 의 [data-rs="hero"])도 같은 값을 쓴다 — 바꾸면 같이 바꿀 것. */
.tkhero{background-color:var(--deep);color:#fff;padding:58px 0 52px;position:relative;overflow:hidden;
  margin-top:16px}
.tkhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 380px at 8% 0%, rgba(106,149,241,.26), transparent 60%),
    radial-gradient(560px 420px at 96% 100%, rgba(25,94,204,.34), transparent 60%)}
.tkhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(620px 320px at 50% -10%, #000, transparent 72%);
          mask-image:radial-gradient(620px 320px at 50% -10%, #000, transparent 72%)}
.tkhero .tkwrap{position:relative;z-index:1}
.tkhero .eyebrow{color:var(--blue-surface);display:inline-flex;align-items:center;gap:7px}
.tkhero h1{font-size:34px;font-weight:900;margin:0 0 12px;letter-spacing:-.7px;line-height:1.25}
.tkhero p{font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.86);margin:0;max-width:100%}
@media(max-width:620px){.tkhero{padding:40px 0 36px;margin-top:12px}.tkhero h1{font-size:26px}.tkhero p{font-size:14.5px}}

.tkmain{padding:32px 0 48px}
.tkmain section{padding:0}
.tkmain > .tkwrap > h2{font-size:21px;font-weight:850;color:var(--deep);margin:38px 0 12px;
  letter-spacing:-.4px;display:flex;align-items:center;gap:9px}
.tkmain > .tkwrap > h2:first-child{margin-top:0}
.tkmain > .tkwrap > h2 .tkico{color:var(--blue);font-size:20px}
.tkmain > .tkwrap > h3{font-size:16px;font-weight:800;color:var(--deep);margin:22px 0 8px}
.tkmain > .tkwrap > p{font-size:14.8px;line-height:1.85;color:#33405A;margin:0 0 12px}
.tkmain > .tkwrap > p b{color:var(--deep);font-weight:800}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.tkcard{background:#fff;border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:20px 22px;
  box-shadow:var(--tk-shadow)}
.tkcard + .tkcard{margin-top:12px}
@media(max-width:560px){.tkcard{padding:17px 16px}}

/* 카드 안 소제목. 앞에 아이콘 하나가 붙는다 — 어느 서비스든 같은 모양이어야 한다. */
.tkh{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:850;color:var(--deep);
  margin:0 0 12px;letter-spacing:-.3px}
.tkh .tkico{color:var(--blue);font-size:18px}
.tkh em{font-style:normal;color:var(--blue);font-weight:900}
.tkh .tkh-tag{margin-left:auto;font-size:12px;font-weight:700;color:var(--gray)}

.tklead{font-size:14px;line-height:1.85;color:#33405A;margin:0 0 12px}
.tklead:last-child{margin-bottom:0}
.tklead b{color:var(--deep);font-weight:800}
.tklead.muted{color:var(--gray);font-size:13.5px}

/* ── 결과 맨 위 블록 ────────────────────────────────────────────────────
   벌금 계산기·보험나이·궁합·안전유형이 모두 이 모양을 쓴다. */
.tkhead{text-align:center;padding:30px 24px;
  background:linear-gradient(180deg,#fff 0%,var(--tk-surface) 100%)}
.tkhead-emoji{font-size:48px;line-height:1;display:block;margin-bottom:12px}
.tkhead .tkbadge{margin-bottom:12px}
.tkbig{font-size:30px;font-weight:900;color:var(--deep);letter-spacing:-1px;line-height:1.22;margin:0;
  font-variant-numeric:tabular-nums}
.tkbig em{font-style:normal;color:var(--blue)}
.tkbig-xl{font-size:60px;letter-spacing:-2.5px}
.tkbig-xl small{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-left:3px;color:var(--deep)}
.tkhead-sub{font-size:14px;line-height:1.8;color:var(--gray);margin:12px auto 0;max-width:460px}
.tkhead-sub b{color:var(--deep);font-weight:800}
@media(max-width:560px){
  .tkhead{padding:26px 18px}
  .tkbig{font-size:25px}
  .tkbig-xl{font-size:48px;letter-spacing:-2px}
  .tkhead-emoji{font-size:40px}
}

/* ── 배지 ──────────────────────────────────────────────────────────────── */
.tkbadge{display:inline-flex;align-items:center;gap:6px;font-size:11.8px;font-weight:800;letter-spacing:.3px;
  border-radius:999px;padding:6px 12px;background:var(--light);color:var(--blue-d)}
.tkbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.tkbadge.warn{background:#FFF1E6;color:#9A4B06}
.tkbadge.alert{background:#FDE8E8;color:#A62121}
.tkbadge.plain{background:#F2F5FA;color:var(--gray)}

/* ── 라벨 + 값 한 줄 ───────────────────────────────────────────────────── */
.tkrow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--tk-line-soft)}
.tkrow:last-child{border-bottom:none;padding-bottom:0}
.tkrow:first-of-type{padding-top:0}
.tkrow dt{font-size:13.5px;font-weight:700;color:var(--gray);margin:0;flex-shrink:0}
.tkrow dd{margin:0;font-size:14.5px;font-weight:800;color:var(--deep);text-align:right;line-height:1.55}
.tkrow dd small{display:block;font-size:12.2px;font-weight:600;color:var(--gray);margin-top:2px}

/* ── 폼 위젯 ───────────────────────────────────────────────────────────── */
.tkfield + .tkfield{margin-top:20px}
.tklabel{display:block;font-size:14.8px;font-weight:800;color:var(--deep);margin-bottom:3px}
.tklabel .opt{font-weight:600;color:var(--muted);font-size:13px}
.tkhint{font-size:12.8px;line-height:1.65;color:var(--gray);margin:0 0 10px}

.tkchips{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.tkchip span{height:100%}
.tkchips.col{flex-direction:column;gap:7px}
.tkchip{position:relative;display:block}
.tkchip input{position:absolute;opacity:0;width:0;height:0}
.tkchip span{display:block;border:1px solid var(--tk-line);background:#fff;border-radius:12px;
  padding:11px 15px;font-size:14px;font-weight:700;color:#33405A;cursor:pointer;transition:.15s;line-height:1.45}
.tkchip span small{display:block;font-size:12.2px;font-weight:600;color:var(--gray);margin-top:2px}
.tkchip span:hover{border-color:var(--blue-surface);background:#FCFDFF}
.tkchip input:checked + span{border-color:var(--blue);background:var(--light);color:var(--blue-d);
  box-shadow:0 0 0 1px var(--blue) inset}
.tkchip input:checked + span small{color:var(--blue-d);opacity:.85}
.tkchip input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

.tkinput,.tkselect{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--tk-line);border-radius:12px;padding:13px 14px;transition:.15s}
.tkinput::placeholder{color:#AEBACB}
.tkinput:focus,.tkselect:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(25,94,204,.12)}
.tkinput.bad{border-color:#D14343;box-shadow:0 0 0 3px rgba(209,67,67,.1)}
.tkerr{display:flex;align-items:center;gap:5px;font-size:12.3px;font-weight:700;color:#C23434;margin:7px 0 0}
.tkerr[hidden]{display:none}

.tkbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--blue);color:#fff;border:none;border-radius:12px;padding:15px 22px;
  font-family:inherit;font-size:15.5px;font-weight:800;cursor:pointer;transition:.15s;
  box-shadow:0 10px 22px -14px rgba(25,94,204,.9)}
.tkbtn:hover{background:var(--blue-d)}
.tkbtn:active{transform:translateY(1px)}
.tkbtn[disabled]{background:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.tkbtn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#fff;border:1px solid var(--tk-line);color:#33405A;font-size:13.5px;
  font-weight:700;border-radius:11px;padding:11px 16px;width:auto;cursor:pointer;font-family:inherit;transition:.15s}
.tkbtn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.tkacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tkacts .tkbtn{flex:1 1 220px;width:auto}

/* ── 결과 영역 ─────────────────────────────────────────────────────────── */
.tkresult{margin-top:22px}
.tkresult[hidden]{display:none}

/* ── 안내 상자 ─────────────────────────────────────────────────────────── */
/* ⚠ flex 컨테이너로 만들지 말 것.
   flex 로 두면 안쪽의 <strong>·글자·<a> 가 **각각 flex 아이템이 되어 나란히** 배치된다.
   궁합 안내문이 세 칸으로 쪼개져 보이던 원인이다(2026-08-24 지적받음).
   아이콘은 절대배치로 얹고 본문은 왼쪽 여백으로 비켜 준다 — 안에 어떤 인라인 요소가 와도 안전하다. */
.tknote{position:relative;background:var(--light);border:1px solid #D8E3F7;border-radius:13px;
  padding:14px 16px 14px 44px;font-size:13px;line-height:1.8;color:#33405A;margin:16px 0 0}
.tknote::before{content:"";position:absolute;left:16px;top:16px;width:17px;height:17px;background-color:var(--blue);
  -webkit-mask:var(--tknote-ico) center/contain no-repeat;mask:var(--tknote-ico) center/contain no-repeat;
  --tknote-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11.2v5M12 7.8h.01'/></svg>")}
.tknote strong{color:var(--deep)}
.tknote b{color:var(--deep);font-weight:800}
.tknote.plain{background:#F7F9FC;border-color:var(--tk-line);color:var(--gray)}
.tknote.plain::before{background-color:var(--muted)}
.tknote.warn{background:#FFF6EE;border-color:#F4DCC4;color:#5C3A17}
.tknote.warn::before{background-color:#C0721F;
  --tknote-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4.3L2.6 18a1.7 1.7 0 001.5 2.6h15.8A1.7 1.7 0 0021.4 18L13.7 4.3a1.7 1.7 0 00-3 0z'/><path d='M12 9.5v4M12 17.5h.01'/></svg>")}
.tknote.alert{background:#FDECEC;border-color:#F3C9C9;color:#5F1F1F}
.tknote.alert::before{background-color:#A62121;
  --tknote-ico:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4.3L2.6 18a1.7 1.7 0 001.5 2.6h15.8A1.7 1.7 0 0021.4 18L13.7 4.3a1.7 1.7 0 00-3 0z'/><path d='M12 9.5v4M12 17.5h.01'/></svg>")}
.tknote a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ── 접었다 펴는 설명 ──────────────────────────────────────────────────── */
.tkfaq{border:1px solid var(--tk-line);border-radius:13px;background:#fff;overflow:hidden;transition:.15s}
.tkfaq + .tkfaq{margin-top:8px}
.tkfaq:hover{border-color:#D4DEEC}
.tkfaq[open]{background:var(--tk-surface);border-color:#D8E3F7}
.tkfaq summary{cursor:pointer;list-style:none;padding:15px 17px;font-size:14.8px;font-weight:700;
  color:var(--deep);display:flex;align-items:center;justify-content:space-between;gap:12px}
.tkfaq summary::-webkit-details-marker{display:none}
.tkfaq summary::after{content:"";flex-shrink:0;width:16px;height:16px;background-color:var(--muted);
  transition:transform .2s;
  -webkit-mask:var(--tkchev) center/contain no-repeat;mask:var(--tkchev) center/contain no-repeat;
  --tkchev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9.5l6 6 6-6'/></svg>")}
.tkfaq[open] summary::after{transform:rotate(180deg);background-color:var(--blue)}
.tkfaq summary:hover{color:var(--blue)}
.tkfaq-body{padding:0 17px 17px;font-size:13.9px;line-height:1.85;color:#33405A}
.tkfaq-body p{font-size:13.9px;margin:0 0 10px}
.tkfaq-body p:last-child{margin-bottom:0}
.tkfaq-body b{color:var(--deep);font-weight:800}

/* ── 상담 CTA ──────────────────────────────────────────────────────────────
   모든 서비스가 같은 모양을 쓴다: 본사이트 base.css 의 `.final` 계열을 그대로 따른
   **밝은 전면 CTA + 일러스트**. (2026-08-24 에 어두운 라운드 블록에서 이쪽으로 통일했다.)

   ⚠ 전면(full-bleed)이라 `.tkwrap` **바깥**, `</main>` 다음에 놓는다. 안에 넣으면
     좌우 여백이 남아 전면 배경이 안 된다. 푸터 바로 위에 붙어야 흰 띠가 안 생긴다. */
.tkfinal{background:var(--light);padding:46px 0}
.tkfinal-in{max-width:940px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:28px}
.tkfinal-fig{width:150px;flex-shrink:0}
.tkfinal-fig img{width:100%;height:auto;display:block}
.tkfinal-copy{flex:1 1 380px;max-width:520px;min-width:260px}
.tkfinal-copy h2{font-size:25px;font-weight:900;color:var(--deep);margin:0 0 9px;line-height:1.32;letter-spacing:-.5px}
.tkfinal-copy p{font-size:14.5px;color:var(--gray);margin:0 0 18px;line-height:1.7}
.tkfinal-copy a{display:inline-flex;align-items:center;gap:9px;background:var(--blue);color:#fff;
  font-weight:800;font-size:15px;border-radius:12px;padding:14px 24px;transition:.15s}
.tkfinal-copy a:hover{background:var(--blue-d);transform:translateY(-1px)}
.tkfinal-copy a .tkico{font-size:17px;transition:transform .18s}
.tkfinal-copy a:hover .tkico{transform:translateX(3px)}
@media(max-width:640px){
  .tkfinal{padding:36px 0}
  .tkfinal-in{gap:18px;padding:0 16px}
  .tkfinal-copy h2{font-size:21px}
}

/* ── 허브 카드 목록 ────────────────────────────────────────────────────── */
.tkgroup{margin-top:38px}
.tkgroup:first-of-type{margin-top:0}
.tkgroup-head{margin-bottom:16px}
.tkgroup-head h2{margin:0 0 5px;font-size:21px;font-weight:850;color:var(--deep);letter-spacing:-.4px;
  display:flex;align-items:center;gap:9px}
.tkgroup-head h2 .tkico{color:var(--blue);font-size:20px}
.tkgroup-head p{font-size:13.8px;color:var(--gray);margin:0;line-height:1.7}
.tkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:12px}
.tkcards a{background:#fff;border:1px solid var(--tk-line);border-radius:var(--tk-radius);padding:20px;
  display:flex;flex-direction:column;gap:7px;transition:.18s;box-shadow:var(--tk-shadow)}
.tkcards a:hover{border-color:var(--blue-surface);transform:translateY(-3px);box-shadow:var(--tk-shadow-lift)}
.tkcards .ico{font-size:22px;line-height:1;width:44px;height:44px;border-radius:13px;background:var(--light);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.tkcards .nm{font-size:16px;font-weight:850;color:var(--deep);letter-spacing:-.35px}
.tkcards .ds{font-size:13.2px;line-height:1.65;color:var(--gray)}
.tkcards .tag{margin-top:auto;padding-top:10px;font-size:12.2px;font-weight:700;color:var(--blue);
  display:flex;align-items:center;gap:6px}
.tkcards .tag .tkico{font-size:14px;transition:transform .18s}
.tkcards a:hover .tag .tkico{transform:translateX(3px)}

/* ── 푸터 ──────────────────────────────────────────────────────────────── */
/* ⚠ 푸터에 margin-top 을 주지 말 것.
   로또·토토는 푸터 바로 위가 배경색이 깔린 전면 CTA(.lcta/.tcta)라, 여백을 주면
   그 사이가 흰 띠로 보인다(2026-08-24 지적받음). 아래 여백은 .tkmain 의 padding-bottom 이 맡는다. */
.tkft{background:#0A1526;color:#8698b3;padding:40px 0 36px;font-size:12.5px;text-align:center}
.tkft img{height:26px;width:auto;display:inline-block;margin-bottom:14px}
.tkft .links{margin:0 0 12px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.tkft .links a{color:#8698b3;font-size:12.5px}
.tkft .links a:hover{color:#fff}
.tkft .legal{margin:0 auto;line-height:1.9;color:#6b7d97;font-size:11.8px;max-width:760px}
.tkft .legal b{color:#aab8cc}