/* =====================================================================
   stagePAN 공통 스타일 — 2026-10-04 리브랜딩(디자인 가이드 design-hmmm-ee 적용)
   크림 바탕, 검정 글자, 분홍 한 색, 둥근 면(50px)과 알약(500px), 그림자 없음.
   소유: ui-designer. 도구 CSS는 여기 토큰(var(--kt-…))만 쓴다.
   글꼴은 각 HTML <head>의 Google Fonts <link>로 불러온다(@import 안 함).
   지침: _workspace/02_designer_guide.md  계획: _workspace/02_designer_plan.md
   ===================================================================== */

:root {
  /* ---- 색 (필수 토큰) ---- */
  --kt-bg: #FFFCF0;          /* 크림: 페이지 바탕 */
  --kt-surface: #FFFFFF;     /* 흰 면: 카드·입력칸 (크림과 구분되도록 테두리와 함께) */
  --kt-ink: #000000;         /* 검정: 본문 글자, 테두리 */
  --kt-ink-soft: #666666;    /* 회색: 보조 글자 (크림 5.6:1, 흰 면 5.7:1) — 분홍 위에는 쓰지 않는다 */
  --kt-primary: #FFC2CC;     /* 분홍: 주 행동 버튼 바탕, 현재 메뉴 */
  --kt-on-primary: #000000;  /* 분홍 위 글자는 검정(흰 글자는 1.5:1이라 쓰지 않는다) */
  --kt-accent: #FFC2CC;      /* 대담한 한 곳(점수판)의 색 = 분홍 */
  --kt-danger: #000000;      /* 초기화·경고: 색을 늘리지 않고 글과 모양(테두리 버튼)으로 알린다 */
  --kt-focus: #000000;

  /* ---- 색 (추가 토큰) ---- */
  --kt-block: #E1FBFF;           /* 하늘 면: 기본 버튼·고르기·스테퍼 바탕 (가이드 palette-4) */
  --kt-btn-bg: var(--kt-block);  /* 기본 버튼 바탕 */
  --kt-primary-press: #000000;   /* (이전 토큰 유지) 눌림 테두리 */
  --kt-ui-line: #7A706B;         /* 컴포넌트 테두리(버튼·고르기·스테퍼·입력 밑줄): 웜 그레이. 크림 4.69, 하늘 4.46, 분홍 3.18:1 */
  --kt-line: #E5E5E5;            /* 구분선(장식·영역 구분) */
  --kt-line-strong: #666666;     /* 입력칸 밑줄, 사다리 세로줄처럼 3:1 이상 필요한 선 */
  --kt-muted-bg: #F2EEE0;        /* 옅은 면: 광고 빈 자리, 눌림·선택 옅은 면 */
  --kt-board: #FFC2CC;           /* 점수판 바탕(분홍) */
  --kt-board-ink: #000000;       /* 점수판 숫자·결과 (분홍 위 13.8:1) */
  --kt-board-text: #000000;      /* 점수판 안 보조 글자 (분홍 위 회색은 3.8:1이라 검정) */
  --kt-board-chalk: rgba(0, 0, 0, 0.16); /* 점수판 안 옅은 선·막대 바탕 */
  --kt-board-alert: #000000;     /* 경고 상태 점수판 바탕(검정, 숫자는 분홍으로 뒤집힘) */
  --kt-sat: #1F4FD8;             /* 달력 토요일 (관례 색, 달력 숫자에만) */
  --kt-sun: #C9311F;             /* 달력 일요일·공휴일 (관례 색, 달력 숫자에만) */

  /* 룰렛 칸(바탕/글자) — 1~4 차례로, 마지막 칸이 1번과 같으면 5번 */
  --kt-seg-1: #FFC2CC; --kt-seg-1-ink: #000000;
  --kt-seg-2: #E1FBFF; --kt-seg-2-ink: #000000;
  --kt-seg-3: #FFFCF0; --kt-seg-3-ink: #000000;
  --kt-seg-4: #7A706B; --kt-seg-4-ink: #FFFCF0;   /* 웜 그레이 + 크림 글자 4.69:1 */
  --kt-seg-5: #FFFFFF; --kt-seg-5-ink: #000000;

  /* 사다리 길 색(흰 면 위 3:1 이상) — 참여자 구분용 기능 색. 사다리 판 안에서만 */
  --kt-path-1: #1F4FD8;  --kt-path-2: #C9311F;  --kt-path-3: #0F8A5F;
  --kt-path-4: #B98500;  --kt-path-5: #7B3FC4;  --kt-path-6: #E0611A;
  --kt-path-7: #0E7C9A;  --kt-path-8: #B0337A;  --kt-path-9: #5B6B2E;
  --kt-path-10: #000000;

  /* ---- 글꼴: 숫자·영문 Figtree, 한글 Gothic A1 (Figtree에 한글이 없어 글자별로 넘어간다) ---- */
  --kt-font-display: "Figtree", "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --kt-font-body: "Figtree", "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --kt-fs-s: 14px;    /* Small */
  --kt-fs-m: 17px;    /* Body L — 본문 */
  --kt-fs-l: 22px;    /* H4 */
  --kt-fs-xl: 24px;   /* H3 */
  --kt-fs-2xl: 32px;  /* H2 */
  --kt-fs-3xl: 58px;  /* H1 */

  /* ---- 모양: 큰 면 50px, 카드 40px, 누르는 것은 모두 알약 ---- */
  --kt-radius-s: 500px;  /* 버튼·스테퍼·고르기·작은 칸: 알약 */
  --kt-radius-m: 40px;   /* 카드 */
  --kt-radius-l: 50px;   /* 점수판 */

  /* ---- 간격: 기본 40px ---- */
  --kt-space-1: 5px;
  --kt-space-2: 10px;
  --kt-space-3: 20px;
  --kt-space-4: 30px;
  --kt-space-5: 40px;
  --kt-space-6: 80px;

  --kt-max: 1120px;      /* 본문 최대 폭 */
  --kt-gutter: 16px;     /* 화면 가장자리 여백 */
  --kt-nav-h: 124px;     /* 메뉴 높이(1024px 미만: 로고 줄 + 메뉴 줄) */
}

@media (min-width: 640px) {
  :root { --kt-gutter: 40px; }
}
@media (min-width: 1024px) {
  :root { --kt-nav-h: 88px; }      /* 로고와 메뉴가 한 줄 */
}
@media (min-width: 768px) {
  :root {
    --kt-space-4: 40px;
    --kt-space-6: 120px;
  }
}
@media (max-width: 639px) {
  :root {
    --kt-radius-m: 32px;
    --kt-radius-l: 40px;
  }
}

/* ---- 어두운 화면: <html class="kt-dark">일 때만(사용자가 켤 때). 검정 바탕 + 분홍 ---- */
html.kt-dark {
  --kt-bg: #000000;
  --kt-surface: #000000;
  --kt-ink: #FFFCF0;
  --kt-ink-soft: #A3A3A3;      /* 검정 위 8.3:1 */
  --kt-primary: #FFC2CC;
  --kt-on-primary: #000000;
  --kt-accent: #FFC2CC;
  --kt-danger: #FFFCF0;
  --kt-focus: #FFC2CC;
  --kt-btn-bg: #262626;        /* 크림 글자 14.7:1 */
  --kt-line: #4D4D4D;
  --kt-line-strong: #A3A3A3;
  --kt-ui-line: #A3A3A3;       /* 어두운 화면 컴포넌트 테두리: 검정 8.3:1, #262626 위 6.0:1 */
  --kt-muted-bg: #262626;
  --kt-board: #000000;
  --kt-board-ink: #FFC2CC;     /* 검정 위 분홍 숫자 13.8:1 */
  --kt-board-text: #FFFCF0;
  --kt-board-chalk: rgba(255, 194, 204, 0.3);
  --kt-board-alert: #FFC2CC;   /* 경고: 분홍 바탕 + 검정 숫자로 뒤집힘 */
  color-scheme: dark;
}

/* =====================================================================
   기본
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

.kt-page {
  min-height: 100vh;
  background: var(--kt-bg);
  color: var(--kt-ink);
  font-family: var(--kt-font-body);
  font-size: var(--kt-fs-m);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* 기본 리셋은 :where()로 우선순위 0 — 컴포넌트 클래스를 덮어쓰지 않게 */
:where(.kt-page) :where(img, svg) { max-width: 100%; }
:where(.kt-page) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
:where(.kt-page) :where(a) { color: var(--kt-ink); text-underline-offset: 0.18em; }
:where(.kt-page) :where(b, strong, th) { font-weight: 600; }

/* ---- 페이지 세로 흐름: 섹션 간 여백은 이 규칙 한 곳에서만 정한다 ----
   각 영역은 --kt-flow 값만 바꾼다(margin을 직접 쓰지 않는다). */
.kt-page > * {
  width: min(calc(100% - 2 * var(--kt-gutter)), var(--kt-max));
  margin-inline: auto;
}
.kt-page > * + * {
  margin-top: var(--kt-flow, var(--kt-space-4));
}
.kt-page > .kt-sidenav,
.kt-page > .kt-footer { width: 100%; }

.kt-topbar  { --kt-flow: var(--kt-space-3); }
.kt-stage   { --kt-flow: var(--kt-space-2); }
.kt-article { --kt-flow: var(--kt-space-6); }
.kt-ad      { --kt-flow: var(--kt-space-5); }   /* 위 40px */
.kt-ad + *  { --kt-flow: var(--kt-space-5); }   /* 아래 40px */
.kt-footer  { --kt-flow: var(--kt-space-6); }

/* ---- 포커스(모든 상호작용 요소) ---- */
.kt-page :focus-visible {
  outline: 3px solid var(--kt-focus);
  outline-offset: 3px;
}

.kt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* =====================================================================
   도구 메뉴 (.kt-sidenav — 이름은 계약상 유지. 1024px 이상 로고+메뉴 한 줄, 미만은 로고 줄 + 가로로 밀리는 메뉴 줄)
   layout.js가 채운다. 채우기 전에도 높이(--kt-nav-h)를 잡아 둔다.
   ===================================================================== */
.kt-sidenav {
  background: var(--kt-bg);
  min-height: var(--kt-nav-h);
}
.kt-nav {
  width: min(calc(100% - 2 * var(--kt-gutter)), var(--kt-max));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-1);
  padding-top: var(--kt-space-2);
}

/* 로고: stagePAN 글자 워드마크(Figtree 600). 장식 없음 */
.kt-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;                  /* 터치 영역 44px 이상 */
  padding-right: var(--kt-space-1);
  color: var(--kt-ink);
  text-decoration: none;
  border-radius: var(--kt-radius-s);
}
.kt-logo__word {
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 메뉴 줄. 1024px 미만: 짧은 이름이 한 줄로 놓이고, 넘치면 이 줄만 가로로 밀린다(페이지는 넘치지 않음).
   넘친 쪽 끝은 흐려진다(layout.js가 --more-start/--more-end를 붙임). 현재 메뉴는 처음에 가운데로 옮긴다. */
.kt-nav__list {
  position: relative;                /* layout.js가 offsetLeft로 현재 메뉴 위치를 잰다 */
  list-style: none;
  margin: 0 -4px;
  padding: 4px;                      /* 초점 테두리가 잘리지 않을 자리 */
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 40px;
  scrollbar-width: none;
}
.kt-nav__list::-webkit-scrollbar { display: none; }
.kt-nav__list--more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.kt-nav__list--more-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.kt-nav__list--more-start.kt-nav__list--more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.kt-nav__list li { flex: 0 0 auto; display: flex; }

.kt-nav__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                  /* 터치 영역 44px 이상 */
  padding: 12px 14px;                /* min-height가 무시되는 환경에서도 24+24=48px */
  border-radius: var(--kt-radius-s);
  color: var(--kt-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.kt-nav__list .kt-nav__link:focus-visible { outline-offset: -3px; }   /* 가로로 밀리는 줄 안에서 잘리지 않게 */
.kt-nav__link:hover { text-decoration: underline; }
.kt-nav__link[aria-current="page"] {
  background: var(--kt-primary);
  color: var(--kt-on-primary);
}
.kt-nav__link[aria-current="page"]:hover { text-decoration: none; }

/* 1024px 미만: 짧은 이름만 보이고 긴 이름은 화면 읽기용으로 남긴다 */
.kt-nav__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.kt-nav__short { display: inline; }

@media (min-width: 768px) {
  .kt-logo__word { font-size: 32px; }
  .kt-nav__link { font-size: var(--kt-fs-m); padding-inline: 18px; }
}

/* 1024px 이상: 로고와 메뉴가 한 줄, 긴 이름. 7개가 다 들어가 밀리지 않는다 */
@media (min-width: 1024px) {
  .kt-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--kt-space-5);
    min-height: var(--kt-nav-h);
    padding-top: 0;
  }
  .kt-logo { align-self: center; }
  .kt-nav__list { gap: var(--kt-space-1); overflow: visible; margin: 0; padding: 0; }
  .kt-nav__list--more-start, .kt-nav__list--more-end { -webkit-mask-image: none; mask-image: none; }
  .kt-nav__list .kt-nav__link:focus-visible { outline-offset: 3px; }
  .kt-nav__link {
    min-height: 48px;
    padding: 0 var(--kt-space-3);
  }
  .kt-nav__name {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; white-space: nowrap;
  }
  .kt-nav__short { display: none; }
}

/* =====================================================================
   위쪽 줄: 제목 입력 + 아이콘 버튼
   ===================================================================== */
.kt-topbar {
  display: flex;
  align-items: center;
  gap: var(--kt-space-2);
}
.kt-topbar .kt-title-input { flex: 1 1 auto; min-width: 0; }
.kt-topbar__tools {
  display: flex;
  gap: var(--kt-space-2);
  flex: 0 0 auto;
}

/* 제목 입력: 큰 제목 글자, 밑줄만 */
.kt-title-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--kt-space-1) var(--kt-space-2);
  border: 0;
  border-bottom: 2px solid var(--kt-line);
  border-radius: 0;
  background: transparent;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--kt-ink);
}
.kt-title-input::placeholder { color: var(--kt-ink-soft); opacity: 1; font-weight: 400; }
.kt-title-input:hover { border-bottom-color: var(--kt-ui-line); }
.kt-title-input:focus { border-bottom-color: var(--kt-ink); }
@media (min-width: 768px) {
  .kt-title-input { font-size: var(--kt-fs-2xl); }
}

/* 아이콘 버튼(전체화면·효과음): 하늘 원 + 웜 그레이 테두리 */
.kt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--kt-ui-line);
  border-radius: 50%;
  background: var(--kt-btn-bg);
  color: var(--kt-ink);
  cursor: pointer;
}
.kt-icon-btn svg { width: 22px; height: 22px; display: block; }
.kt-icon-btn:active { transform: scale(0.94); }
/* 상태는 아이콘 모양(layout.js)과 aria-pressed로 알린다. 바탕은 바꾸지 않는다 */
.kt-icon-btn[hidden] { display: none; }

/* =====================================================================
   도구 영역
   ===================================================================== */
.kt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kt-space-4);
  text-align: center;
}
.kt-stage > * { max-width: 100%; }

/* 홈: 첫 화면에는 현재 시간만. 메뉴 아래 남은 높이를 채우고 시계를 세로 가운데에 둔다.
   설명글은 첫 화면 바로 아래에서 시작한다(스크롤해야 보임). */
body[data-tool="home"] > .kt-stage {
  min-height: calc(100vh - var(--kt-nav-h) - var(--kt-space-2));
  justify-content: center;
  padding-block: var(--kt-space-3);
}

/* 줄·쌓기 도우미 */
.kt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kt-space-2) var(--kt-space-2);
}
.kt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kt-space-2);
}

/* =====================================================================
   점수판 (.kt-board) — 사이트에서 대담한 단 한 곳
   분홍 둥근 면 + 검정 Figtree 큰 숫자. 테두리·그림자 없음.
   ===================================================================== */
.kt-board {
  width: 100%;
  background: var(--kt-board);
  color: var(--kt-board-ink);
  border-radius: var(--kt-radius-l);
  padding: clamp(30px, 5vw, 60px) clamp(20px, 4vw, 60px);
  text-align: center;
  position: relative;
  container-type: inline-size;       /* 안의 .kt-num이 점수판 안쪽 폭(cqi) 기준으로 커진다 */
}
.kt-board--strip {             /* 결과 띠: 사다리·룰렛·캘린더 결과 칸 */
  padding-block: clamp(20px, 3vw, 30px);
}
.kt-board__label {              /* 점수판 안 작은 제목·상태(일시정지, 오전/오후 등) */
  margin: 0 0 var(--kt-space-2);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-l);
  line-height: 1.3;
  color: var(--kt-board-ink);
}
.kt-board__sub {                /* 점수판 안 보조 줄(날짜 등) */
  margin: var(--kt-space-3) 0 0;
  font-size: var(--kt-fs-m);
  font-weight: 500;
  line-height: 1.5;
  color: var(--kt-board-text);
}
.kt-board__sub + .kt-board__sub { margin-top: var(--kt-space-1); }
.kt-board__sub:first-child { margin-top: 0; }   /* 보조 줄만 있는 결과 띠(안내 문구)는 가운데에 */
.kt-board__result {             /* 결과 단어 */
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(40px, 9vw, 102px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--kt-board-ink);
  overflow-wrap: anywhere;
}
.kt-board .kt-num { color: var(--kt-board-ink); }

/* 경고(타이머 마지막 10초): 점수판이 뒤집힌다 — 밝은 화면은 검정 바탕 + 분홍 숫자 */
.kt-board.is-warning {
  background: var(--kt-board-alert);
  --kt-board-ink: var(--kt-board);
  --kt-board-text: var(--kt-board);
  --kt-board-chalk: rgba(255, 194, 204, 0.35);
  --kt-focus: var(--kt-board);
}
html.kt-dark .kt-board.is-warning { --kt-board-chalk: rgba(0, 0, 0, 0.25); }

/* 결과 발표: 한 번 살짝 커지며 나타난다 (결과가 나올 때 클래스를 붙였다 뗀다) */
.kt-board.is-reveal .kt-board__result,
.kt-board.is-reveal .kt-num {
  animation: kt-pop 0.4s cubic-bezier(.2, .9, .3, 1.15) both;
}
@keyframes kt-pop {
  0%   { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 종료 알림: 점수판이 검정/분홍으로 3번 바뀐다(초당 2회, 광과민성 기준 이하) */
.kt-board.is-alert { animation: kt-alert 0.5s steps(1, end) 3; }
@keyframes kt-alert {
  0%   { background: var(--kt-board-alert); color: var(--kt-board); }
  50%  { background: var(--kt-board); color: var(--kt-board-alert); }
}
.kt-board.is-alert .kt-num,
.kt-board.is-alert .kt-board__result { color: inherit; }

/* =====================================================================
   큰 숫자 — Figtree 600, 고정폭 숫자(tnum: 0~9 모두 0.629em)
   ===================================================================== */
.kt-num {
  display: block;
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-num-size, min(21.5cqi, 200px));
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
/* 크기는 점수판 안쪽 폭(cqi) 기준. Figtree 600 + 자간 -0.02em 실측 폭(글자 크기 1em당):
   MM:SS 5자 = 2.70em, HH:MM:SS 8자 = 4.18em, MM:SS.cc 8자 = 4.13em,
   H:MM:SS.cc 10자 = 5.00em, HH:MM:SS.cc 11자 = 5.61em. 모두 안쪽 폭의 92% 이하. */
.kt-num--short { --kt-num-size: min(33.5cqi, 240px); }  /* MM:SS (5자) → 90.4% */
.kt-num--xl    { --kt-num-size: min(21.5cqi, 280px); }  /* 시계 HH:MM:SS (8자) → 89.9% */
.kt-num--long  { --kt-num-size: min(18cqi, 170px); }    /* 스톱워치 H:MM:SS.cc (10자) → 90.0% */
.kt-num--xlong { --kt-num-size: min(16cqi, 152px); }    /* 스톱워치 HH:MM:SS.cc (11자) → 89.8% */
.kt-num--m  { --kt-num-size: clamp(40px, 9vw, 72px); }  /* D-day, 스텝퍼 옆 숫자 */
.kt-num--s  { --kt-num-size: var(--kt-fs-xl); }         /* 랩 목록 등 */
/* 기본 .kt-num(수식어 없음)은 8자(MM:SS.cc)까지: 21.5cqi → 88.8% */

/* 컨테이너 단위를 모르는 오래된 브라우저: 화면 폭(vw) 기준 근사값 */
@supports not (container-type: inline-size) {
  .kt-num        { font-size: var(--kt-num-size, min(17vw, 200px)); }
  .kt-num--short { --kt-num-size: min(26vw, 240px); }
  .kt-num--xl    { --kt-num-size: min(17vw, 280px); }
  .kt-num--long  { --kt-num-size: min(14vw, 170px); }
  .kt-num--xlong { --kt-num-size: min(12.5vw, 152px); }
}

/* =====================================================================
   버튼 — 모두 알약. 경계는 웜 그레이 2px(하늘·분홍은 크림과 대비가 낮아 테두리로 구분)
   ===================================================================== */
.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kt-space-2);
  min-height: 48px;
  min-width: 48px;
  padding: 0 var(--kt-space-4);
  border: 2px solid var(--kt-ui-line);
  border-radius: var(--kt-radius-s);
  background: var(--kt-btn-bg);
  color: var(--kt-ink);
  font-family: var(--kt-font-body);
  font-weight: 500;
  font-size: var(--kt-fs-m);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease-out, background-color 0.1s;
}
.kt-btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kt-btn:active { transform: scale(0.96); }

/* 주 행동: 분홍 알약 + 검정 글자. 한 화면에 1~2개 */
.kt-btn--primary {
  background: var(--kt-primary);
  color: var(--kt-on-primary);
  font-weight: 600;
}
.kt-btn--primary:active { background: var(--kt-primary); }

/* 보조(가벼운 행동): 바탕 없이 테두리만 */
.kt-btn--ghost { background: transparent; }

/* 초기화·삭제: 바탕 없이 테두리만. 색을 더하지 않고 글로 알린다("초기화", "삭제") */
.kt-btn--danger {
  background: transparent;
  border-color: var(--kt-ui-line);
  color: var(--kt-danger);
}

/* 크기 */
.kt-btn--lg {
  min-height: 64px;
  min-width: min(240px, 100%);
  padding: 0 var(--kt-space-5);
  font-size: var(--kt-fs-l);
}
.kt-btn--sm {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  font-size: 16px;
}

/* 켜짐/고름 상태(토글·빠른 설정에서 지금 값): 분홍 + 검정 테두리 + 굵은 글자.
   분홍(고름)과 하늘(안 고름)은 1.4:1이라 색만으로 구분하지 않는다: 600 굵기와 검정 테두리를 함께 */
.kt-btn[aria-pressed="true"] {
  background: var(--kt-primary);
  border-color: var(--kt-ink);
  color: var(--kt-on-primary);
  font-weight: 600;
}

.kt-btn:disabled,
.kt-btn[aria-disabled="true"],
.kt-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  text-decoration: none;
}

/* 둘 중 하나 고르기(타이머/스톱워치, 12/24시간, 난이도): 알약 안의 알약 */
.kt-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 2px solid var(--kt-ui-line);
  border-radius: var(--kt-radius-s);
  background: var(--kt-btn-bg);
}
.kt-seg > button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--kt-space-3);
  border: 0;
  border-radius: var(--kt-radius-s);
  background: transparent;
  color: var(--kt-ink);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
.kt-seg > button[aria-pressed="true"] {
  background: var(--kt-primary);
  color: var(--kt-on-primary);
  font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--kt-ink);   /* 고른 칸에만 검정 선 — 색 + 굵기 + 선 */
}
.kt-seg > button:disabled { opacity: 0.4; cursor: not-allowed; }
.kt-seg > button:focus-visible { outline-offset: 1px; }

/* =====================================================================
   스테퍼 (− 숫자 +)
   ===================================================================== */
.kt-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--kt-space-2);
}
.kt-stepper__btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--kt-ui-line);
  border-radius: 50%;
  background: var(--kt-btn-bg);
  color: var(--kt-ink);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.kt-stepper__btn:active { transform: scale(0.94); }
.kt-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.kt-stepper__value {
  min-width: 2.4ch;
  text-align: center;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-xl);
  font-variant-numeric: tabular-nums;
  border: 0;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.kt-stepper__value::-webkit-inner-spin-button,
.kt-stepper__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kt-stepper__label {
  font-size: var(--kt-fs-s);
  font-weight: 500;
  color: var(--kt-ink-soft);
}
/* 세로형: 위 버튼 / 숫자 / 아래 버튼 (타이머 분·초) */
.kt-stepper--vertical { flex-direction: column; }

/* =====================================================================
   입력칸·안내
   ===================================================================== */
.kt-input {
  min-height: 48px;
  width: 100%;
  padding: var(--kt-space-2) var(--kt-space-2);
  border: 0;
  border-bottom: 2px solid var(--kt-ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--kt-ink);
  font-size: var(--kt-fs-m);
}
.kt-input:focus { border-bottom-color: var(--kt-ink); }
.kt-input::placeholder { color: var(--kt-ink-soft); opacity: 1; }
.kt-input[aria-invalid="true"] { border-bottom: 3px solid var(--kt-danger); }

.kt-field { display: flex; flex-direction: column; gap: var(--kt-space-1); text-align: left; }
.kt-field > label { font-size: var(--kt-fs-s); font-weight: 600; color: var(--kt-ink-soft); }

.kt-hint {
  margin: 0;
  font-size: var(--kt-fs-s);
  line-height: 1.5;
  color: var(--kt-ink-soft);
}
.kt-hint--error { color: var(--kt-danger); font-weight: 600; }

/* =====================================================================
   묶음 면·목록·표
   ===================================================================== */
.kt-card {
  background: var(--kt-surface);
  border: 2px solid var(--kt-line);
  border-radius: var(--kt-radius-m);
  padding: var(--kt-space-4);
  text-align: left;
}

/* 줄을 나눈 목록(D-day 목록, 랩, 결과 기록) */
.kt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kt-line);
  text-align: left;
}
.kt-list > li {
  display: flex;
  align-items: center;
  gap: var(--kt-space-3);
  min-height: 52px;
  padding: var(--kt-space-2) var(--kt-space-1);
  border-bottom: 1px solid var(--kt-line);
}

.kt-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.kt-table th, .kt-table td {
  padding: var(--kt-space-2) var(--kt-space-2);
  border-bottom: 1px solid var(--kt-line);
}
.kt-table th { font-size: var(--kt-fs-s); color: var(--kt-ink-soft); font-weight: 600; }

/* =====================================================================
   홈 도구 레인 (2026-10-04부터 홈에서 쓰지 않음. 이름은 유지)
   ===================================================================== */
.kt-lanes {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--kt-line);
  text-align: left;
}
.kt-lane {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name action" "desc action";
  align-items: center;
  gap: 2px var(--kt-space-3);
  padding: var(--kt-space-3) var(--kt-space-1);
  border-bottom: 1px solid var(--kt-line);
}
.kt-lane__name {
  grid-area: name;
  margin: 0;
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-xl);
  line-height: 1.2;
}
.kt-lane__name a { color: inherit; text-decoration: none; }
.kt-lane__desc { grid-area: desc; margin: 0; color: var(--kt-ink-soft); }
.kt-lane__action { grid-area: action; }

/* =====================================================================
   설명글 (.kt-article) — 바탕 면 없이 크림 위에 바로. 한 줄 약 38자, 줄 간격 1.75
   ===================================================================== */
.kt-article {
  border-top: 2px solid var(--kt-line);
  padding: var(--kt-space-5) 0 0;
  text-align: left;
  line-height: 1.75;
}
.kt-article > * { max-width: 38em; }
/* 필수 페이지(소개·개인정보·문의·404): 메뉴 바로 아래 <main class="kt-article"> — 구분선·큰 여백 없이 시작 */
.kt-sidenav + .kt-article {
  --kt-flow: var(--kt-space-3);
  border-top: 0;
  padding-top: 0;
}
.kt-article h1 {
  margin: 0 0 var(--kt-space-4);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.kt-article h2 {
  margin: 0 0 var(--kt-space-3);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.kt-article h3 {
  margin: var(--kt-space-5) 0 var(--kt-space-2);
  font-family: var(--kt-font-display);
  font-weight: 600;
  font-size: var(--kt-fs-l);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .kt-article h2 { font-size: var(--kt-fs-2xl); }
  .kt-article h3 { font-size: var(--kt-fs-xl); }
}
.kt-article * + h2 { margin-top: var(--kt-space-5); }
.kt-article h2 + h3 { margin-top: var(--kt-space-3); }
/* FAQ 질문 등 h3 아래 단계: 본문과 같은 크기(17px), 굵게 */
.kt-article h4 {
  margin: var(--kt-space-4) 0 var(--kt-space-1);
  font-family: var(--kt-font-body);
  font-weight: 600;
  font-size: var(--kt-fs-m);
  line-height: 1.5;
  color: var(--kt-ink);
}
.kt-article h3 + h4 { margin-top: var(--kt-space-2); }
.kt-article p, .kt-article ul, .kt-article ol, .kt-article dl {
  margin: 0 0 var(--kt-space-3);
}
.kt-article ul, .kt-article ol { padding-left: 1.4em; }
.kt-article li + li { margin-top: var(--kt-space-1); }
.kt-article details {
  border-bottom: 1px solid var(--kt-line);
  padding: var(--kt-space-2) 0;
}
.kt-article details:first-of-type { border-top: 1px solid var(--kt-line); }
.kt-article summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.kt-article details > :not(summary) { margin-top: var(--kt-space-2); }
.kt-article kbd {
  font-family: var(--kt-font-body);
  font-size: 0.9em;
  font-weight: 600;
  padding: 1px 8px;
  border: 1px solid var(--kt-line-strong);
  border-radius: var(--kt-radius-s);
  background: var(--kt-surface);
}
.kt-article small, .kt-article .kt-hint { color: var(--kt-ink-soft); }

/* 설명글 안에는 광고 자리를 두지 않는다(광고는 페이지 하단 .kt-ad 하나) */

/* =====================================================================
   광고 자리 (.kt-ad) — 자리를 미리 잡아 버튼이 밀리지 않게.
   고정 배치·버튼처럼 꾸미기 금지(알약·테두리 쓰지 않음).
   ===================================================================== */
.kt-ad {
  position: relative;
  min-height: 250px;
  padding-top: 24px;                 /* "광고" 표시 자리 */
  background: var(--kt-muted-bg);
  border-radius: 20px;
  text-align: center;
}
.kt-ad::before {
  content: "광고";
  position: absolute;
  top: 4px;
  left: 16px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--kt-ink-soft);
}
@media (min-width: 768px) {
  .kt-ad { min-height: 280px; }
}

/* =====================================================================
   푸터
   ===================================================================== */
.kt-footer {
  border-top: 2px solid var(--kt-line);
  padding: var(--kt-space-4) 0 var(--kt-space-5);
  color: var(--kt-ink-soft);
  font-size: var(--kt-fs-s);
}
.kt-footer__inner {
  width: min(calc(100% - 2 * var(--kt-gutter)), var(--kt-max));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kt-space-2) var(--kt-space-4);
}
.kt-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--kt-space-3);
}
.kt-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--kt-ink);
  font-weight: 500;
}
.kt-footer__copy { margin: 0; }

/* =====================================================================
   전체화면 (layout.js가 <html>에 .kt-is-fullscreen 을 붙인다)
   진짜 전체화면과 "화면 꽉 채우기"(미지원 환경) 모두 같은 클래스.
   ===================================================================== */
.kt-is-fullscreen .kt-sidenav,
.kt-is-fullscreen .kt-article,
.kt-is-fullscreen .kt-ad,
.kt-is-fullscreen .kt-footer,
.kt-is-fullscreen .kt-fs-none {
  display: none !important;
}
.kt-is-fullscreen .kt-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-block: var(--kt-space-3);
}
.kt-is-fullscreen .kt-page > * + * { margin-top: var(--kt-space-2); }
.kt-is-fullscreen .kt-stage {
  flex: 1 1 auto;
  justify-content: center;
}
.kt-is-fullscreen body[data-tool="home"] > .kt-stage { min-height: 0; }
.kt-is-fullscreen .kt-page > * { width: calc(100% - 2 * var(--kt-gutter)); }  /* 전체화면은 최대 폭 제한 없이 */
.kt-is-fullscreen .kt-num        { --kt-num-size: min(21.5cqi, 48vh); }
/* --short는 폭보다 높이가 먼저 찬다: 점수판 밖 조작 줄(.kt-fs-hide, 투명해도 자리를 차지)과
   제목·날짜 줄에 약 460px을 남긴다. 360×640 같은 세로 화면은 33.5cqi가 먼저 걸린다. */
.kt-is-fullscreen .kt-num--short { --kt-num-size: max(48px, min(33.5cqi, 50vh, 100vh - 460px)); }
.kt-is-fullscreen .kt-num--xl    { --kt-num-size: min(21.5cqi, 56vh); }
.kt-is-fullscreen .kt-num--long  { --kt-num-size: min(18cqi, 40vh); }
.kt-is-fullscreen .kt-num--xlong { --kt-num-size: min(16cqi, 36vh); }
.kt-is-fullscreen .kt-num--m     { --kt-num-size: min(12cqi, 20vh); }
@supports not (container-type: inline-size) {
  .kt-is-fullscreen .kt-num        { --kt-num-size: min(19vw, 48vh); }
  .kt-is-fullscreen .kt-num--short { --kt-num-size: max(48px, min(29vw, 50vh, 100vh - 460px)); }
  .kt-is-fullscreen .kt-num--xl    { --kt-num-size: min(19vw, 56vh); }
  .kt-is-fullscreen .kt-num--long  { --kt-num-size: min(15.5vw, 40vh); }
  .kt-is-fullscreen .kt-num--xlong { --kt-num-size: min(14vw, 36vh); }
}
.kt-is-fullscreen .kt-board__result { font-size: min(14vw, 30vh); }

/* 전체화면에서 3초 동안 움직임이 없으면 감출 것(.kt-fs-hide) */
.kt-fs-hide { transition: opacity 0.3s; }
.kt-is-fullscreen.kt-is-idle .kt-fs-hide,
.kt-is-fullscreen.kt-is-idle .kt-topbar__tools {
  opacity: 0;
  pointer-events: none;
}
.kt-is-fullscreen.kt-is-idle .kt-page { cursor: none; }

/* =====================================================================
   움직임 줄이기
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kt-page *, .kt-page *::before, .kt-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 종료 알림은 깜빡임 대신 뒤집힌 색으로 멈춘다 */
  .kt-board.is-alert {
    animation: none !important;
    background: var(--kt-board-alert);
    color: var(--kt-board);
  }
  .kt-btn:active, .kt-icon-btn:active, .kt-stepper__btn:active { transform: none; }
}