/* ONDO NOTE (온도노트 / 温度ノート) — "온도를 맞춰 가는 개인 노트"
   · 바탕: 점선 노트(도트 그리드), 카드에는 노트 여백선
   · 색: 따뜻함(코랄)과 차분함(블루)이 축. 브랜드 띠·로고 다이얼·온도계(지원 강도·진행률)에만 둘을 잇는다
     — 한국·일본 같은 문화 구분에는 온도색을 쓰지 않는다 (국가 고정관념 방지)
   · 활자: 둥근 고딕 제목(Zen Maru Gothic / Gowun Dodum) + IBM Plex 본문·숫자 */
:root {
  --paper: #f6f3ee;
  --paper-2: #ece7df;
  --card: #fffdf9;
  --ink: #1f2430;
  --ink-2: #4a505e;
  --muted: #6b6f79;
  --line: #ddd6cb;
  --rule: #2b3140;
  --dot: rgba(43, 49, 64, .11);
  --warm: #b8412a;          /* 따뜻함 — 글자·버튼 (대비 4.5:1 이상) */
  --warm-bright: #e0583a;   /* 따뜻함 — 띠·로고·온도계 같은 면 */
  --warm-soft: #fbe6df;
  --cool: #2f5f96;          /* 차분함 — 글자 */
  --cool-bright: #4a7fbd;   /* 차분함 — 면 */
  --cool-soft: #e2ebf6;
  --tune: #8a7a9e;          /* 둘이 맞춰진 중간 (면·띠용) */
  --tune-ink: #6a5a80;      /* 같은 색의 글자용 (대비 4.5:1 이상) */
  --seal: var(--warm);      /* 예전 이름 호환 */
  --seal-soft: var(--warm-soft);
  --indigo: var(--cool);
  --ok: #2f7d5b;
  --warn: #8a5208;
  --grp-a: #a63d5c;         /* 친절·성과·창조 — 장밋빛 (주홍 '새 관계'·온도색과 구분, 2026-10-08) */
  --grp-b: #1f6f68;         /* 연구·안전·긍정 */
  --grp-c: #6b4f9a;         /* 주도·평화·규칙 */
  /* 문화 배경 그래프: 온도 축(주홍↔파랑)과 겹치지 않게 채도 낮은 슬레이트·올리브, 밝기로도 구분 (2026-10-08 — 한국=차분함 같은 연상 방지) */
  --kr: #4d5566;
  --jp: #87815f;
  --thermo: linear-gradient(90deg, var(--cool-bright), var(--tune) 50%, var(--warm-bright));
  --display: 'Zen Maru Gothic', 'Gowun Dodum', sans-serif;
  --serif: var(--display);
  --sans: 'IBM Plex Sans KR', 'IBM Plex Sans JP', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --radius: 14px;
  --shadow: 0 1px 0 rgba(43, 49, 64, .05), 0 12px 28px -20px rgba(43, 49, 64, .45);
  color-scheme: light;
}
:root[lang="ja"] { --sans: 'IBM Plex Sans JP', 'IBM Plex Sans KR', system-ui, sans-serif; --display: 'Zen Maru Gothic', 'Gowun Dodum', sans-serif; }
:root[lang="ko"] { --display: 'Gowun Dodum', 'Zen Maru Gothic', sans-serif; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14171e; --paper-2: #1b1f28; --card: #1a1e27; --ink: #ece8e1; --ink-2: #bdb8b0;
    --muted: #8f939c; --line: #2f3542; --rule: #c9c4bb; --dot: rgba(236, 232, 225, .07);
    --warm: #f07a5c; --warm-bright: #f07a5c; --warm-soft: #3a211b; --cool: #79a6db; --cool-bright: #79a6db; --cool-soft: #1c2a3c; --tune: #a998bd; --tune-ink: #a998bd;
    --ok: #7fc4a0; --warn: #e2b45c; --grp-a: #e88aa3; --grp-b: #6cc0b6; --grp-c: #ab97dd;
    --kr: #b3b9c6; --jp: #7d7759;
    --on-warm: #1a1e27; /* 밝은 주홍 위 글자: 흰색은 2.75:1이라 어두운 글자(약 7:1) */
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 28px -18px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
/* 화면 모드 '어둡게'를 고른 경우 (theme.js) — 위와 같은 값 */
:root[data-theme="dark"] {
    --paper: #14171e; --paper-2: #1b1f28; --card: #1a1e27; --ink: #ece8e1; --ink-2: #bdb8b0;
    --muted: #8f939c; --line: #2f3542; --rule: #c9c4bb; --dot: rgba(236, 232, 225, .07);
    --warm: #f07a5c; --warm-bright: #f07a5c; --warm-soft: #3a211b; --cool: #79a6db; --cool-bright: #79a6db; --cool-soft: #1c2a3c; --tune: #a998bd; --tune-ink: #a998bd;
    --ok: #7fc4a0; --warn: #e2b45c; --grp-a: #e88aa3; --grp-b: #6cc0b6; --grp-c: #ab97dd;
    --kr: #b3b9c6; --jp: #7d7759;
    --on-warm: #1a1e27; /* 밝은 주홍 위 글자: 흰색은 2.75:1이라 어두운 글자(약 7:1) */
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 28px -18px rgba(0, 0, 0, .9);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px);   /* 점선 노트 */
  background-size: 22px 22px;
  background-position: 11px 11px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
/* 화면 맨 위 온도 띠 */
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 3px; background: var(--thermo); z-index: 20; }

a { color: var(--cool); text-underline-offset: 3px; }
button { font: inherit; }
::selection { background: var(--warm); color: var(--on-warm, #fff); }

/* ---------- 상단 바 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px 10px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: 'Zen Maru Gothic', var(--display); font-size: 18px; font-weight: 700; letter-spacing: .16em;
  color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px;
}
/* 로고 다이얼: 따뜻함과 차분함이 만나는 원 */
.brand::before {
  content: ''; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle at center, var(--paper) 0 4px, transparent 4.5px),
    linear-gradient(90deg, var(--cool-bright) 50%, var(--warm-bright) 50%);
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1.5px var(--ink);
}
.brand small { font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.topbar .spacer { flex: 1; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.lang-toggle button { border: 0; background: transparent; color: var(--ink-2); padding: 4px 12px; min-height: 36px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.link-btn { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 14px; padding: 4px 6px; }
.topbar .link-btn { min-height: 36px; } /* 머리 메뉴는 손가락으로 누르기 쉽게 */
.link-btn:hover { color: var(--warm); }

main { max-width: 780px; margin: 0 auto; padding: 36px 20px 120px; position: relative; counter-reset: sec; }

/* ---------- 활자 ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.4; margin: 0; }
h1 { font-size: clamp(28px, 5.2vw, 38px); letter-spacing: -.005em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
/* 큰 항목 번호: 노트 색인 */
main h2 { counter-increment: sec; display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
main h2::before {
  content: counter(sec, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--warm); background: var(--warm-soft); padding: 1px 8px; border-radius: 6px;
}
main .card h2, main .support h2 { counter-increment: none; border: 0; padding: 0; display: block; }
main .card h2::before, main .support h2::before { content: none; }
.eyebrow { font-family: var(--display); font-size: 13px; letter-spacing: .06em; color: var(--warm); font-weight: 700; }
.lead { color: var(--ink-2); margin: 10px 0 0; }
.muted { color: var(--muted); }
p { margin: 0 0 .8em; }

/* ---------- 노트 카드·버튼 ---------- */
.card {
  background-color: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 24px 24px 30px; box-shadow: var(--shadow);
  /* 노트 여백선 */
  background-image: linear-gradient(90deg, transparent 14px, color-mix(in srgb, var(--warm) 28%, transparent) 14px 15px, transparent 15px);
}
.stack > * + * { margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 10px;
  padding: 11px 22px; cursor: pointer; font-weight: 600; text-decoration: none;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(31, 36, 48, .6); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--ink-2); }
.btn.seal { background: var(--warm); border-color: var(--warm); color: var(--on-warm, #fff); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-row.spread { justify-content: space-between; }

input[type="email"], input[type="text"], input[type="password"], input[type="search"], .input, select.input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 16px;
}
/* 포커스는 차분한 파랑 (주홍은 오류처럼 보였다 — 2026-10-08 결정 23). 진단 척도는 선택 색(주홍)과 구분되게 같은 파랑 */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, .scale label:focus-within, summary:focus-visible {
  outline: 2px solid var(--cool); outline-offset: 2px;
}
label.field { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }

/* 안내: 노트에 붙인 메모 */
.notice { border: 1px solid color-mix(in srgb, var(--warm) 35%, var(--line)); border-radius: 12px; background: var(--warm-soft); padding: 12px 16px; font-size: 14px; }
.notice.info { border-color: color-mix(in srgb, var(--cool) 30%, var(--line)); background: var(--cool-soft); }
.notice strong { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 2px; }
.devcode { font-family: var(--mono); font-size: 24px; letter-spacing: .32em; color: var(--warm); }

/* 로그인 입구 전환 */
.login-switch { font-size: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.card.admin-entry { border-top: 4px solid var(--cool); }

/* ---------- 언어 선택 ---------- */
.lang-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lang-choice button {
  border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 26px 18px 22px;
  cursor: pointer; text-align: left; color: var(--ink); box-shadow: var(--shadow); transition: transform .12s, border-color .12s;
}
.lang-choice button:hover { transform: translateY(-2px); }
.lang-choice button[aria-pressed="true"] { border-color: var(--warm); box-shadow: 0 0 0 3px var(--warm-soft); }
.lang-choice .big { font-family: var(--display); font-size: 30px; display: block; }
.lang-choice .small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.consent-list { list-style: none; padding: 0; margin: 0; counter-reset: c; }
.consent-list li { counter-increment: c; position: relative; padding: 12px 0 12px 44px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.consent-list li::before {
  content: counter(c); position: absolute; left: 0; top: 12px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--warm); background: var(--warm-soft);
}
.check { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--warm); }

/* ---------- 유형 표시: 노트 인덱스 탭 ---------- */
.seal-mark {
  --c: var(--warm);
  display: inline-grid; place-items: center; width: 92px; height: 92px; flex: none; border-radius: 22px;
  border: 2px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--card));
  box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--c) 18%, transparent);
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.1; text-align: center;
  animation: pop .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.seal-mark.sm { width: 54px; height: 54px; font-size: 15px; border-radius: 14px; box-shadow: none; animation: none; }
.seal-mark[data-group="A"] { --c: var(--grp-a); }
.seal-mark[data-group="B"] { --c: var(--grp-b); }
.seal-mark[data-group="C"] { --c: var(--grp-c); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.type-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 13px;
  padding: 2px 10px; border-radius: 8px; white-space: nowrap;
  color: var(--c, var(--ink-2)); background: color-mix(in srgb, var(--c, var(--ink-2)) 11%, transparent);
}
.type-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.type-chip[data-group="A"] { --c: var(--grp-a); }
.type-chip[data-group="B"] { --c: var(--grp-b); }
.type-chip[data-group="C"] { --c: var(--grp-c); }
.type-chip.pending { --c: var(--muted); font-family: var(--sans); font-weight: 400; background: transparent; border: 1px dashed var(--line); }
.type-chip.pending::before { display: none; }

/* ---------- 진단 ---------- */
/* 진행률: 온도계 */
.progress { position: relative; height: 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); margin-left: 8px; }
.progress { margin-left: 0; }
/* 진행 끝 표시 (12차: 왼쪽 끝 고정 동그라미가 끌어 움직이는 손잡이처럼 보였다 → 채운 막대 끝에) */
.progress > i { position: relative; min-width: 12px; }
.progress > i::after { content: ''; position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translateY(-50%); background: var(--warm-bright); box-shadow: 0 0 0 3px var(--paper); }
.progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--warm-bright), color-mix(in srgb, var(--warm-bright) 70%, var(--tune))); transition: width .3s ease; }
.progress-sticky {
  position: sticky; top: var(--topbar-h); z-index: 5; padding: 12px 0 10px;
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 6px 10px -8px rgba(31, 36, 48, .25);
}
.progress-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; font-variant-numeric: tabular-nums; } /* 고정폭 글꼴은 한글 글자 사이가 벌어졌다 (12차) */
.progress-row .save-state { font-size: 11px; }
.progress-row .link-btn { margin-left: auto; padding: 0; font-family: var(--sans); font-size: 13px; text-decoration: underline; }
.question { padding: 22px 0 26px; margin: 0; min-width: 0; border: 0; border-bottom: 1px dashed var(--line); scroll-margin-top: 140px; }
/* fieldset의 legend는 위 여백 바깥에 놓여 '문항 ↔ 답' 간격이 '답 ↔ 다음 문항'보다 커졌다 → legend를 흐름 안으로 (답이 다음 문항에 붙어 보이지 않게) */
.question > legend.qt { float: left; width: 100%; padding: 0; }
.question > .scale { clear: both; }
.question:last-child { border-bottom: 0; }
.question .qn { font-family: var(--mono); color: var(--warm); font-size: 12px; margin-right: 10px; }
.question .qn::before { content: 'Q'; margin-right: 1px; }
.question .qt { font-size: 17px; margin-bottom: 14px; font-weight: 500; }
.question.missing .qt { color: var(--warm); }
.question.missing .scale { outline: 2px dashed var(--warm); outline-offset: 4px; }
/* 척도: 다섯 칸 */
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scale label { position: relative; cursor: pointer; text-align: center; }
.scale input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.scale span {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.3; color: var(--ink-2); background: var(--card); border: 1px solid var(--line);
  transition: background .12s, color .12s, border-color .12s;
}
@media (hover: hover) { .scale label:hover span { border-color: var(--ink-2); } }
.scale input:checked + span { background: var(--warm); border-color: var(--warm); color: var(--on-warm, #fff); font-weight: 600; }
.instructions { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
.instructions li::marker { color: var(--warm); }

/* ---------- 결과·사람 ---------- */
.result-hero { display: flex; gap: 24px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.result-hero .names h1 { margin-top: 4px; }
/* 사람 상세: 유형 표시 + 한 줄 소개, 그 아래 이름 (휴대폰·PC 같은 배치) */
.result-hero.person-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 14px; align-items: center; }
.person-hero .names { grid-column: 1 / -1; }
.seal-desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 34em; }
.person-name.h1 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 5.2vw, 38px); line-height: 1.3; }
.reading { font-size: .72em; color: var(--muted); font-weight: 400; font-family: var(--sans); }
.original { font-size: .72em; color: var(--muted); font-weight: 400; }
.combo { font-family: var(--display); font-size: 18px; border-left: 4px solid var(--warm); padding: 8px 0 8px 14px; color: var(--ink); background: linear-gradient(90deg, var(--warm-soft), transparent 70%); border-radius: 0 10px 10px 0; }
.section { position: relative; }
.section h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.section h3::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--warm); flex: none; }
.prose p { color: var(--ink-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.list { margin: 0; padding-left: 18px; color: var(--ink-2); }
.list li { margin-bottom: 4px; }
.list li::marker { color: var(--warm); }
.keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.keywords span { font-size: 13px; padding: 2px 10px; border-radius: 8px; color: var(--ink-2); background: var(--paper-2); }
.keywords span::before { content: '#'; color: var(--warm); margin-right: 2px; }
.phrases { display: flex; flex-wrap: wrap; gap: 8px; }
.phrases span { font-family: var(--display); background: var(--card); border: 1px solid var(--line); padding: 6px 14px; border-radius: 4px 14px 14px 14px; }
.phrases span::before { content: '「'; color: var(--muted); } .phrases span::after { content: '」'; color: var(--muted); }
:root[lang="ko"] .phrases span::before { content: '“'; } :root[lang="ko"] .phrases span::after { content: '”'; }
blockquote { margin: 0; padding: 16px 20px; border-left: 4px solid var(--cool); font-family: var(--display); color: var(--ink-2); background: var(--cool-soft); border-radius: 0 12px 12px 0; }
.guidance h4 { margin: 16px 0 4px; font-size: 15px; font-family: var(--display); }
.guidance h4:first-of-type { margin-top: 4px; }

/* 점수·분포 막대 */
.bars, .dist { display: grid; gap: 8px; }
.dist { margin-top: 10px; }
.bar { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; font-size: 13px; }
.dist .bar { grid-template-columns: 88px 1fr 24px; }
.bar > span:last-child { font-family: var(--mono); text-align: right; }
.bar .track { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--ink-2); }
.bar.top .track i { background: var(--warm); }
details.more { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--card); }
details.more > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: baseline; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; font-family: var(--mono); color: var(--warm); width: 16px; } /* 다른 접기와 같은 표시 */
details.more[open] > summary::before { content: "−"; }

/* ---------- 홈 ---------- */
/* 지원 강도: 온도계 — 집중(따뜻함) · 보통 · 안정(차분함) */
.support { position: relative; }
.support:has(> .level) { padding-bottom: 74px; }
.support .level {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--display); font-weight: 700; font-size: 14px; padding: 2px 12px 2px 8px; border-radius: 999px;
  color: var(--lv-ink, var(--lv)); background: color-mix(in srgb, var(--lv) 12%, transparent);
}
.support .level::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 25%, transparent); }
.support[data-level="focus"] { --lv: var(--warm); --p: .86; }
.support[data-level="normal"] { --lv: var(--tune); --lv-ink: var(--tune-ink); --p: .5; }
.support[data-level="quiet"] { --lv: var(--cool); --p: .14; }
.support:has(> .level)::after {
  content: ''; position: absolute; left: 30px; right: 24px; bottom: 42px; height: 8px; border-radius: 999px; background: var(--thermo); opacity: .9;
}
.support:has(> .level)::before {
  /* 끌 수 있는 손잡이처럼 보이지 않게: 속이 찬 작은 표시 */
  content: ''; position: absolute; bottom: 39px; left: calc(30px + (100% - 54px) * var(--p, .5)); width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--lv); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--lv);
  transition: left .6s cubic-bezier(.2, .8, .2, 1);
}
.todo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mytype { display: flex; gap: 18px; align-items: center; text-decoration: none; color: inherit; transition: transform .12s; }
.mytype:hover { transform: translateY(-1px); border-color: var(--warm); }

/* 명단 */
.people-group { margin-top: 18px; }
.people-group h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; padding: 6px 2px; }
.person {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center;
  padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
a.person { color: inherit; text-decoration: none; transition: border-color .12s, transform .12s, box-shadow .12s; }
a.person:hover { border-color: color-mix(in srgb, var(--warm) 50%, var(--line)); transform: translateY(-1px); box-shadow: var(--shadow); }
.person .name { font-weight: 600; font-size: 17px; }
.person .meta { font-size: 13px; color: var(--muted); }
.person .badges { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1; }
.badge { white-space: nowrap; font-size: 12px; padding: 0 8px; border-radius: 6px; color: var(--ink-2); background: var(--paper-2); line-height: 1.8; }
.badge.warn { background: var(--warm-bright); color: var(--on-warm); }
.badge.stage-planned, .badge.stage-new { color: var(--warm); background: var(--warm-soft); }
.badge.stage-settling { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.badge.stage-stable { color: var(--muted); }
/* 문화 차이가 없는 관계의 새로움은 경고색 없이 (12차: 지원 강도 '안정'인데 전원 주홍 '새 관계'라 모순처럼 보였다) */
.badge.plain { color: var(--ink-2); background: transparent; }
.badge.culture { color: var(--cool); background: var(--cool-soft); }
/* 접어 둔 묶음 */
.fold { margin-bottom: 8px; border: 1px dashed var(--line); border-radius: 12px; }
.fold > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '+'; font-family: var(--mono); color: var(--warm); width: 16px; }
.fold[open] > summary::before { content: '−'; }
.fold > .person { margin: 0 8px 8px; }

/* 요약 */
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.summary-grid .card h3 { font-size: 19px; }
.stat-line { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.stat-line .num { font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1; }
.stat-line .of { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* 유형 분포 막대그래프 (SVG) */
.chart { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.chart .gridline { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .col { fill: var(--muted); rx: 4; }
.chart .col.A { fill: var(--grp-a); } .chart .col.B { fill: var(--grp-b); } .chart .col.C { fill: var(--grp-c); }
.chart .col.zero { fill: none; stroke: var(--line); stroke-dasharray: 2 2; }
.chart .col.second { fill: color-mix(in srgb, var(--muted) 38%, var(--card)); } /* 2순위: 1순위 위에 회색 */
.chart .val.in { font-size: 10.5px; font-weight: 700; }
.chart .val.in.on-color { fill: #fff; } .chart .val.in.on-grey { fill: var(--ink); }
.chart-legend { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); justify-content: flex-end; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 8px; }
.chart-legend .sw.first { background: linear-gradient(90deg, var(--grp-a) 33%, var(--grp-b) 33% 66%, var(--grp-c) 66%); }
.chart-legend .sw.second { background: color-mix(in srgb, var(--muted) 38%, var(--card)); }
.chart .val { font-family: var(--mono); font-size: 11px; fill: var(--ink); text-anchor: middle; }
.chart .lbl { font-family: var(--display); font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--ink-2); }
.chart .lbl.A { fill: var(--grp-a); } .chart .lbl.B { fill: var(--grp-b); } .chart .lbl.C { fill: var(--grp-c); }
.chart .bracket { stroke: var(--line); stroke-width: 1; fill: none; }
/* 문화 배경: 100% 띠 (온도색 아님) */
.culture-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 6px; background: var(--paper-2); }
.culture-bar i { display: block; height: 100%; }
.culture-bar i + i { border-left: 2px solid var(--card); }
.culture-bar .KR, .legend .KR { background: var(--kr); }
.culture-bar .JP, .legend .JP { background: var(--jp); }
.culture-bar .BOTH, .legend .BOTH { background: repeating-linear-gradient(135deg, var(--kr) 0 4px, var(--jp) 4px 8px); }
.culture-bar .OTHER, .legend .OTHER { background: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span i { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
.legend .num { font-family: var(--mono); }
/* 조직 규칙 문장 */
.insights { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.insight { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.insight-label { font-size: 12px; font-weight: 700; color: var(--warm); }
.insight strong { display: block; font-family: var(--display); font-size: 15px; margin-top: 2px; }
.insight p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.summary-note { font-size: 13px; margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }

/* ---------- 관리자 ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); overflow-x: auto; }
/* 좁은 화면: 오른쪽 끝을 흐리게 해서 옆으로 더 있다는 것을 보여 준다 (끝까지 밀면 마지막 탭은 여백 덕에 선명) */
@media (max-width: 640px) {
  .tabs { padding-right: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}
.tabs .tab { padding: 7px 14px; text-decoration: none; color: var(--ink-2); font-weight: 600; white-space: nowrap; border-radius: 9px; }
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.active { color: var(--ink); background: var(--card); box-shadow: inset 0 -2px 0 var(--warm-bright), 0 1px 3px rgba(31, 36, 48, .15); } /* 어두운 화면에서도 지금 탭이 보이게 */
.filters { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.filters.three { grid-template-columns: 1fr 200px minmax(180px, auto); }
.filters.four { grid-template-columns: 1fr 180px minmax(170px, auto) minmax(150px, auto); } /* '재직 상태: 전체' 접두가 잘리지 않게 */
.unit-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; }
.unit-row > span:last-child { grid-column: 1 / -1; }
.unit-head { font-size: 12px; font-weight: 600; }
.name-table { display: grid; gap: 8px; }
.name-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.name-row.titles { grid-template-columns: 1.2fr 1fr 1fr auto; }
.name-row .need, .unit-row .need { font-size: 12px; color: var(--warm); }
.timeline { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 100px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.event:last-child { border-bottom: 0; }
.event-date { font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding-top: 3px; }
.event-cancelled { opacity: .55; }
.event-cancelled strong { text-decoration: line-through; }

/* 시작하기 */
.setup-list { display: grid; gap: 8px; }
.setup-step { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.setup-no { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--mono); font-size: 13px; color: var(--warm); background: var(--warm-soft); }
.setup-step.done { background: transparent; }
.setup-step.done .setup-no { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.setup-step.done strong { color: var(--ink-2); }
textarea.input { resize: vertical; font-family: var(--sans); }
/* 조직도 */
.org-tree { border-top: 1px solid var(--line); }
.org-row { padding: 10px 4px 10px calc(4px + var(--depth) * 22px); border-bottom: 1px dashed var(--line); display: grid; gap: 4px; position: relative; }
.org-row::before { content: ''; position: absolute; left: calc(var(--depth) * 22px - 10px); top: 0; bottom: 50%; width: 8px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 6px; }
.org-row[style*="--depth:0"]::before { display: none; }
.org-row .link-btn { padding: 8px 4px; min-height: 36px; font-size: 13px; text-decoration: underline; } /* 휴대폰에서도 누르기 쉽게 */
.org-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.org-inline .input { width: auto; flex: 1 1 160px; min-width: 0; max-width: 100%; }
/* 표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { text-align: left; font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
table.grid td .link-btn, table.grid th { white-space: nowrap; }
table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid td.num, .num { font-family: var(--mono); }
table.grid tr.err td { background: var(--warm-soft); }
table.grid tr.muted-row td { color: var(--muted); }
/* 설정 */
.scope-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--card); }
.scope-option:has(input:checked) { border-color: var(--warm); box-shadow: 0 0 0 3px var(--warm-soft); }
.scope-option input { margin-top: 5px; accent-color: var(--warm); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; align-items: baseline; }
.kv > span:nth-child(odd) { color: var(--muted); font-size: 13px; }
.conflict { border-color: var(--warm); border-left-width: 4px; }
@media (max-width: 600px) { .setup-step { grid-template-columns: 32px 1fr; } .setup-step .badge, .setup-step .btn { grid-column: 2; justify-self: start; } }

/* ---------- 상태 ---------- */
.loading { color: var(--muted); padding: 40px 0; text-align: center; font-family: var(--mono); letter-spacing: .3em; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper); padding: 11px 18px; font-size: 14px; border-radius: 12px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); max-width: calc(100% - 32px); animation: rise .25s ease both;
}
.toast::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--warm-bright); flex: none; }
@keyframes rise { from { transform: translate(-50%, 12px); opacity: 0; } }
.fade-in > * { animation: rise-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.fade-in > *:nth-child(2) { animation-delay: .05s; }
.fade-in > *:nth-child(3) { animation-delay: .1s; }
.fade-in > *:nth-child(4) { animation-delay: .15s; }
.fade-in > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- 휴대폰 ---------- */
@media (max-width: 600px) {
  main { padding: 24px 16px 96px; }
  .card { padding: 18px 18px 18px 26px; }
  .two-col, .summary-grid { grid-template-columns: 1fr; }
  .result-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .seal-mark { width: 78px; height: 78px; font-size: 20px; }
  /* 휴대폰에서도 다섯 칸을 가로로 */
  .scale { gap: 4px; }
  /* 글자 11px은 읽기 어려움 → 12.5px로 키우고 한국어는 단어 단위로 두 줄 (전혀/아니다) */
  .scale span { min-height: 60px; font-size: 12.5px; padding: 4px 2px; word-break: keep-all; overflow-wrap: anywhere; }
  .brand small { display: none; }
  .brand { font-size: 15px; letter-spacing: .1em; }
  .topbar { padding: 11px 12px 8px; gap: 6px; }
  .topbar .link-btn { white-space: nowrap; font-size: 13px; padding: 4px; }
  .hide-mobile { display: none; }
  /* 관리자는 메뉴가 하나 더 있어 잘린다 → 로고 글자는 숨기고 다이얼만 */
  .topbar:has(a[href="#/admin"]) .brand { font-size: 0; gap: 0; }
  .progress-sticky { top: var(--topbar-h); }
  .todo { flex-direction: column; align-items: stretch; }
  .todo .btn { width: 100%; }
  .lang-toggle button { padding: 3px 8px; }
  .lang-choice .big { font-size: 24px; }
  .filters, .filters.three, .filters.four, .unit-row, .name-row, .name-row.titles { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 개발사 콘솔 (/console): 회원 앱과 구분되는 어두운 머리 ---------- */
.console .topbar { background: #1f2430; border-bottom-color: #1f2430; }
.console .topbar .brand, .console .topbar .link-btn, .console .topbar .muted { color: #ece8e1; }
.console .topbar .brand small { color: #f07a5c; font-family: var(--mono); letter-spacing: .1em; }
.console body::before { background: #f07a5c; }

/* 결과지 목차 · 맨 위로 (2026-10-08) — 노트 목차처럼: 점선 줄, 알약 모양 없이 */
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 16px; }
.toc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 18px; margin-top: 4px; counter-reset: toc; }
.toc-item { all: unset; cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); font-size: 14px; counter-increment: toc; }
.toc-item::before { flex: none; min-width: 1.7em; content: counter(toc, decimal-leading-zero); font-family: var(--mono, monospace); font-size: 11px; color: var(--warm); }
.toc-item:hover, .toc-item:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.toc-item:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
.to-top { position: fixed; right: 16px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 20; }
.to-top.show { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ---------- 사용성 점검 6차 (2026-10-08) ---------- */
/* 한국어는 단어 중간에서 줄을 바꾸지 않는다 ("업무성/향" 방지), 일본어는 금칙 처리. 제목은 줄 길이를 고르게 */
:root[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
:root[lang="ja"] body { line-break: strict; }
h1, h2, h3 { text-wrap: balance; }
.lead { text-wrap: pretty; } /* 여러 줄 문단을 balance하면 폭의 70%에서 끊긴다 */
/* 어두운 화면에서 기본 배지가 카드 바탕과 같은 색이라 사라짐 → 옅은 테두리 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge:not([class*="stage-new"]):not([class*="stage-planned"]):not([class*="stage-settling"]):not(.culture) { background: color-mix(in srgb, var(--ink) 9%, transparent); }
}
:root[data-theme="dark"] .badge:not([class*="stage-new"]):not([class*="stage-planned"]):not([class*="stage-settling"]):not(.culture) { background: color-mix(in srgb, var(--ink) 9%, transparent); }
/* 휴대폰 머리 메뉴·언어 버튼: 손가락으로 누르기 쉽게 */
@media (max-width: 600px) {
  .topbar .link-btn, .lang-toggle button { min-height: 40px; }
  /* 관계 안내 본문이 카드·접기·들여쓰기로 세 겹 → 휴대폰에서는 들여쓰기 없이 폭을 넓힌다 */
  .guidance .fold { border: 0; }
  .guidance .fold .fold-body { padding-left: 0; }
}
.fold-body { padding: 4px 6px 8px 30px; }

.thermo-scale { position: absolute; left: 30px; right: 24px; bottom: 14px; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); pointer-events: none; }
.thermo-scale span.on { color: var(--lv-ink, var(--lv)); font-weight: 700; }
.badge.private { white-space: nowrap; flex: none; font-family: var(--sans); font-size: 11px; font-weight: 600; vertical-align: middle; color: var(--muted); border: 1px solid var(--line); background: transparent; }
.lang-toggle button:disabled { cursor: not-allowed; opacity: .45; }
.setup-step.next { border-color: var(--warm); box-shadow: inset 3px 0 0 var(--warm); }
blockquote cite { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--muted); text-align: right; }
/* 개발사 콘솔: 회사 표가 주인공이라 넓게 (회원 앱의 읽기 폭 780px은 표에 좁음) */
.console main { max-width: 1180px; }
/* 메일 주소·금액·계약 방식은 글자 중간에서 끊지 않는다 (한국어 줄바꿈 규칙의 overflow-wrap: anywhere 예외) */
.grid td, .grid th { overflow-wrap: normal; }
.grid td:nth-child(n+2) { white-space: nowrap; }
.grid .muted { overflow-wrap: break-word; }
.grid td .badge { display: inline-block; margin: 4px 4px 0 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
label.btn:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
/* 관리자 구성원 목록 (PC): 수백 명을 훑어보도록 한 사람 = 한 줄 (이름 | 조직·직책·메일 | 상사 | 상태) */
@media (min-width: 900px) {
  .admin-list .person { grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto; gap: 2px 16px; padding: 9px 16px; margin-bottom: 0; border-radius: 0; border-bottom-width: 0; }
  .admin-list .person:first-child { border-radius: 12px 12px 0 0; }
  .admin-list .person:last-child { border-radius: 0 0 12px 12px; border-bottom-width: 1px; }
  .admin-list .person:only-child { border-radius: 12px; }
  .admin-list .person > div:first-child { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
  .admin-list .person .name { font-size: 15px; white-space: nowrap; }
  .admin-list .person > div:first-child .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-list .person .badges:empty { display: none; }
  .admin-list a.person:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--warm) 5%, var(--card)); }
}
/* 처리 양식을 열면 그 위치로 이동하는데 고정 머리 줄에 제목이 가려졌다 */
form.card, .card.stack { scroll-margin-top: 80px; }
form.saved { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
/* 콘솔 회사 상세: 계약 / 진단권 / 관리자 / 이력 구역을 줄로 나눈다 */
h4.detail-sec { margin: 10px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; }
/* 진단: 페이지를 넘기면 첫 문항이 고정 진행 줄 아래에 보이게 */
.diag-body { scroll-margin-top: 150px; }
/* 일본어 척도 글자: 단어(구) 단위로 줄바꿈 (「そう思わ/ない」 방지, Chrome 119+). 지원하지 않으면 기존대로 */
.scale span:lang(ja) { word-break: keep-all; } /* 줄바꿈 지점은 scaleText()가 넣는다 */
@media (max-width: 600px) {
  .scale span:lang(ja) { font-size: 11.5px; }
  .progress-row .link-btn { min-height: 40px; padding: 8px 0; }
  /* 결과지 목차: 두 칸은 일본어 항목명이 3~4줄로 쪼개짐 → 한 칸 */
  .toc-list { grid-template-columns: 1fr; }
}
.toc-item .badge.private { margin-left: auto; }

/* 고정 머리 줄 높이 (머리 메뉴 버튼을 키운 뒤 62px). 고정 진행 줄·목차 이동이 그 밑에 가려지지 않게 (2026-10-08 회귀) */
:root { --topbar-h: 62px; }
section.section, #super-detail > .card { scroll-margin-top: 76px; }
/* 밝은 화면 작은 글자 대비 4.5:1 */
.badge.stage-stable, blockquote cite, .notice.info .eyebrow { color: var(--ink-2) !important; }
/* 한국어 화면 안의 일본어 문항: 한국어 keep-all을 물려받지 않게 (일본어는 글자 사이 줄바꿈 + 금칙) */
.question[lang="ja"] { word-break: normal; line-break: strict; }
.question[lang="ko"] { word-break: keep-all; }

/* (2026-10-12 1차 소개 페이지 스타일은 기업용 개편으로 대체 — 아래 html.landing) */

/* ===================== 소개 페이지 (html.landing, 2026-10-12 기업용 개편) =====================
   한일 기업 인사 담당자가 보는 서비스 사이트. 앱의 노트 장식(점선 바탕·여백선·둥근 제목)은 쓰지 않고,
   흰 바탕·짙은 남색 글자·넉넉한 여백·실제 제품 화면으로 신뢰를 준다. 밝은 화면 고정 (제품 캡처가 밝은 화면) */
html.landing {
  color-scheme: light;
  --lp-ink: #15233c; --lp-body: #3c4859; --lp-muted: #657084; --lp-line: #e1e5ec; --lp-alt: #f4f6f9;
  --lp-primary: #1c3557; --lp-primary-hover: #142a47; --lp-accent: #b8412a;
}
html.landing body { background: #fff; color: var(--lp-body); }
html.landing body::before, html.landing #topbar { display: none; }
html.landing main { max-width: none; padding: 0; }
.lp { font-family: var(--sans); }
.lp h1, .lp h2, .lp h3 { font-family: var(--sans); color: var(--lp-ink); letter-spacing: -.01em; text-wrap: balance; }
.lp h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin: 0 0 32px; display: block; border: 0; padding: 0; counter-increment: none; }
.lp h2::before { content: none; }
.lp h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; line-height: 1.45; }
.lp p { line-height: 1.8; margin: 0; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp-narrow { max-width: 820px; }

/* 머리 */
.lp-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--lp-line); }
.lp-header-in { display: flex; align-items: center; gap: 28px; height: 68px; }
.lp-brand { color: var(--lp-ink); }
.lp-brand small { color: var(--lp-muted); }
.lp-nav { display: flex; gap: 4px; margin-left: 8px; }
.lp-nav button { all: unset; cursor: pointer; white-space: nowrap; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--lp-body); }
.lp-nav button:hover { color: var(--lp-ink); background: var(--lp-alt); }
.lp-nav button:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.lp-header .lang-toggle { background: #fff; border-color: var(--lp-line); }
.lp-header .lang-toggle button { color: var(--lp-body); min-height: 34px; }
.lp-header .lang-toggle button[aria-pressed="true"] { background: var(--lp-ink); color: #fff; }
.lp-link { color: var(--lp-ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lp-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 버튼 */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 8px; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.lp-btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
.lp-btn-primary { background: var(--lp-primary); color: #fff; }
.lp-btn-primary:hover { background: var(--lp-primary-hover); }
.lp-btn-ghost { background: #fff; color: var(--lp-ink); border-color: #c9d0db; }
.lp-btn-ghost:hover { border-color: var(--lp-ink); }
.lp-btn-light { background: #fff; color: var(--lp-primary); }
.lp-btn:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* 첫 화면 */
.lp-hero { padding: 72px 0 64px; background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%); border-bottom: 1px solid var(--lp-line); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.lp-tag { display: inline-block; font-size: 14px; font-weight: 600; color: var(--lp-accent); margin-bottom: 16px !important; padding-left: 12px; border-left: 3px solid var(--lp-accent); line-height: 1.4 !important; }
.lp-hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.32; font-weight: 700; margin: 0 0 20px; }
.lp-lead { font-size: 17px; color: var(--lp-body); max-width: 33em; margin-bottom: 32px !important; }
.lp-note { font-size: 13px; color: var(--lp-muted); margin-top: 14px !important; }
.lp-hero-shots { position: relative; padding: 0 0 40px 0; }
.lp-hero-shots .lp-window { margin-right: 56px; }
.lp-hero-shots .lp-phone { position: absolute; right: 0; bottom: 0; width: 34%; max-width: 200px; }

/* 제품 화면 틀 */
.lp-window { margin: 0; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid #d8dee8; box-shadow: 0 24px 48px -24px rgba(21, 35, 60, .28), 0 2px 6px rgba(21, 35, 60, .06); }
.lp-window-bar { display: flex; gap: 6px; padding: 10px 12px; background: #eef1f5; border-bottom: 1px solid #dde2ea; }
.lp-window-bar span { width: 9px; height: 9px; border-radius: 50%; background: #c8cfda; }
.lp-window img, .lp-phone img, .lp-card-shot img { display: block; width: 100%; height: auto; }
.lp-phone { margin: 0; border-radius: 24px; overflow: hidden; background: #fff; border: 6px solid #1d2635; box-shadow: 0 24px 48px -20px rgba(21, 35, 60, .4); aspect-ratio: 390 / 760; }
.lp-phone img { height: 100%; object-fit: cover; object-position: top; }
.lp-card-shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--lp-line); box-shadow: 0 16px 36px -22px rgba(21, 35, 60, .3); background: #fff; }

/* 사실 줄 */
.lp-facts { border-bottom: 1px solid var(--lp-line); }
.lp-facts ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.lp-facts li { font-size: 15px; font-weight: 600; color: var(--lp-ink); text-align: center; padding: 4px 12px; }
.lp-facts li + li { border-left: 1px solid var(--lp-line); }

/* 구역 */
.lp-sec { padding: 88px 0; }
.lp-sec-alt { background: var(--lp-alt); }
.lp-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-case { background: #fff; border: 1px solid var(--lp-line); border-radius: 10px; padding: 26px 24px; border-top: 3px solid var(--lp-primary); }
.lp-case p { font-size: 15px; }

.lp-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 40px 0; }
.lp-feature + .lp-feature { border-top: 1px solid var(--lp-line); }
.lp-feature.flip .lp-feature-text { order: 2; }
.lp-feature-text h3 { font-size: 22px; margin-bottom: 12px; }
.lp-feature-text p { font-size: 16px; max-width: 30em; }
.lp-feature-shot { display: flex; justify-content: center; }
.lp-feature-shot .lp-window, .lp-feature-shot .lp-card-shot { width: 100%; }
.lp-feature-shot .lp-phone { width: 260px; }
.lp-feature-shot .lp-card-shot { max-width: 520px; }

.lp-steps { list-style: none; margin: 0; padding: 0; counter-reset: lpstep; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.lp-steps li { counter-increment: lpstep; position: relative; padding: 0 24px 0 0; }
.lp-steps li::before { content: counter(lpstep); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lp-primary); color: #fff; font-weight: 700; margin-bottom: 18px; position: relative; z-index: 1; }
.lp-steps li::after { content: ""; position: absolute; top: 20px; left: 40px; right: 0; border-top: 1px solid #c9d0db; }
.lp-steps li:last-child::after { display: none; }
.lp-steps p { font-size: 15px; }

.lp-security { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.lp-security > div { background: #fff; border: 1px solid var(--lp-line); border-radius: 10px; padding: 24px; }
.lp-sec-more { margin: 20px 0 0; font-size: 15px; }
.lp-sec-more a { color: var(--lp-ink); font-weight: 600; text-underline-offset: 4px; }
.lp-security dt { font-weight: 700; color: var(--lp-ink); font-size: 17px; margin-bottom: 8px; }
.lp-security dd { margin: 0; line-height: 1.8; font-size: 15px; }

.lp-faq details { border-bottom: 1px solid var(--lp-line); }
.lp-faq details:first-child { border-top: 1px solid var(--lp-line); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 22px 36px 22px 0; font-weight: 700; color: var(--lp-ink); font-size: 16px; position: relative; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--lp-muted); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq summary:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 2px; }
.lp-faq details p { padding: 0 0 22px; font-size: 15px; }

.lp-cta { background: var(--lp-primary); padding: 64px 0; }
.lp-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.lp-cta h2 { color: #fff; margin: 0 0 8px; }
.lp-cta p { color: #c9d5e6; }
.lp-cta .lp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.lp-cta .lp-btn-ghost:hover { border-color: #fff; }

.lp-footer { background: #0f1a2c; color: #a7b2c3; padding: 48px 0 40px; }
.lp-footer-in { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.lp-footer .lp-brand { color: #fff; margin-bottom: 12px; }
.lp-footer .lp-brand small { color: #a7b2c3; }
.lp-footer p { font-size: 13px; max-width: 40em; }
.lp-footer-links { display: flex; gap: 20px; }
.lp-footer-links a { color: #dbe3ee; font-size: 14px; text-decoration: none; }
.lp-footer-links a:hover { text-decoration: underline; }
.lp-copy { grid-column: 1 / -1; border-top: 1px solid #22304a; padding-top: 20px; margin-top: 8px !important; }

/* 머리 메뉴는 일본어 기준 약 1,050px이 있어야 한 줄로 들어간다 (2026-10-22, 1024px에서 세 줄로 꺾였음) */
@media (max-width: 1100px) { .lp-nav { display: none; } }
@media (max-width: 960px) {
  .lp-hero { padding: 48px 0; }
  .lp-hero-in, .lp-feature { grid-template-columns: 1fr; gap: 36px; }
  .lp-feature.flip .lp-feature-text { order: 0; }
  .lp-cases { grid-template-columns: 1fr; }
  .lp-steps { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .lp-steps li:nth-child(2)::after { display: none; }
  .lp-security { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-wrap { padding: 0 16px; }
  .lp-header-in { height: 60px; gap: 12px; }
  .lp-header .lp-brand small { display: none; }
  .lp-header .lp-btn-sm { display: none; }
  .lp-sec { padding: 60px 0; }
  .lp-facts ul { grid-template-columns: 1fr; padding: 14px 0; }
  .lp-facts li { text-align: left; padding: 8px 0; }
  .lp-facts li + li { border-left: 0; border-top: 1px solid var(--lp-line); }
  .lp-hero-shots .lp-window { margin-right: 32px; }
  .lp-hero-shots .lp-phone { width: 38%; border-width: 4px; border-radius: 18px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-steps li { padding: 0 0 0 56px; }
  .lp-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .lp-steps li::after { display: none; }
  .lp-feature-shot .lp-phone { width: 220px; }
  .lp-actions .lp-btn { flex: 1 1 100%; }
  .lp-footer-in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lp-btn { transition: none; } }
.lp-hero h1 { white-space: pre-line; } /* 제목 줄바꿈은 문구의 \n 위치로 (일본어 「チーム/の」 같은 어색한 끊김 방지) */
.lp-card-shot { max-height: 520px; position: relative; }
.lp-card-shot img { object-fit: cover; object-position: top; }
.lp-card-shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(transparent, #fff); }

/* 도입 문의 창구 (한국·일본) */
.lp-offices { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 12px 40px; margin: 24px 0 0; }
.lp-office dt { font-size: 12px; font-weight: 700; color: #c9d5e6; margin-bottom: 4px; }
.lp-office dd { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.lp-office-name { color: #fff; font-weight: 700; }
.lp-office a { color: #fff; text-decoration: none; }
.lp-office a:hover { text-decoration: underline; }
.lp-foot-offices { grid-column: 1 / -1; margin: 0; }
.lp-foot-offices dt { color: #7d8aa0; }
.lp-foot-offices .lp-office-name { color: #dbe3ee; font-weight: 600; }
.lp-foot-offices a { color: #a7b2c3; }
@media (max-width: 600px) { .lp-offices { grid-template-columns: 1fr; } }
.lp-offices { justify-content: start; }
.lp-footer .lp-copy { max-width: none; }

/* 도입 문의 양식 (대화 상자, 2026-10-12) */
.lp-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--lp-body); box-shadow: 0 24px 64px rgba(15, 26, 44, .28); overflow: auto; }
.lp-dialog::backdrop { background: rgba(15, 26, 44, .55); }
.lp-dialog-head { display: flex; justify-content: space-between; gap: 16px; padding: 28px 28px 8px; }
.lp-dialog-head h2 { margin: 0 0 6px; font-size: 22px; color: var(--lp-ink); }
.lp-dialog-head p { margin: 0; font-size: 14px; color: var(--lp-muted); }
.lp-dialog-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 26px; line-height: 1; color: var(--lp-muted); cursor: pointer; }
.lp-dialog-close:hover { background: var(--lp-alt); color: var(--lp-ink); }
.lp-dialog-body { padding: 16px 28px 28px; }
.lp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 16px; }
.lp-field label, .lp-fieldset legend { display: block; font-size: 13px; font-weight: 700; color: var(--lp-ink); margin-bottom: 6px; padding: 0; }
.lp-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lp-req { color: var(--lp-accent); }
.lp-opt { font-weight: 400; color: var(--lp-muted); }
.lp-input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--lp-ink); background: #fff; border: 1px solid #c9d0db; border-radius: 6px; }
.lp-input:focus { outline: 2px solid var(--lp-primary); outline-offset: 0; border-color: var(--lp-primary); }
textarea.lp-input { resize: vertical; min-height: 96px; }
.lp-radios { display: flex; gap: 20px; padding-top: 8px; }
.lp-radio, .lp-check { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--lp-ink); cursor: pointer; }
.lp-radio input, .lp-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--lp-primary); flex: none; }
.lp-consent { margin: 16px 0 0; padding: 14px 16px; background: var(--lp-alt); border-radius: 8px; }
.lp-consent p { margin: 6px 0 0 26px; font-size: 12px; color: var(--lp-muted); line-height: 1.6; }
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lp-form-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 6px; background: #fbeceb; color: #9a2f1d; font-size: 14px; }
.lp-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.lp-done h3 { margin: 0 0 10px; font-size: 18px; color: var(--lp-ink); }
.lp-done p { margin: 0 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.lp-done-tel { color: var(--lp-muted); font-size: 14px !important; }
.lp-office-mail { user-select: all; }
@media (max-width: 600px) {
  .lp-form-grid { grid-template-columns: 1fr; }
  .lp-dialog-head { padding: 22px 20px 4px; }
  .lp-dialog-body { padding: 12px 20px 22px; }
  .lp-form-actions .lp-btn { flex: 1; }
}
.lp-btn { cursor: pointer; font-family: inherit; line-height: 1.2; }
.lp-dialog .lp-input { padding: 10px 12px; background: #fff; color: var(--lp-ink); border: 1px solid #c9d0db; border-radius: 6px; font-size: 15px; }
.lp-dialog .lp-input:focus-visible { outline: 2px solid var(--lp-primary); outline-offset: 0; }
.lp-radio input { margin-right: 4px; }
.lp-dialog h2, .lp-dialog h3 { font-family: var(--sans); letter-spacing: 0; }
/* 콘솔: 도입 문의 */
.inq-item { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.inq-item.done { opacity: .7; }
.inq-item .input { flex: 1; min-width: 200px; }
.login-noaccount { font-size: 13px; margin-top: 4px; }

/* 일본어 제목·짧은 문단은 어절(문절) 단위로 줄바꿈 (12차: 「初めて会う部/下を」처럼 단어 중간에서 끊겼다). 지원하지 않는 브라우저는 기본 동작 */
:root[lang="ja"] :is(h1, h2, h3, .lead, .lp-lead, .lp-tag, .badge, summary, legend) { word-break: auto-phrase; }
html:not(.landing) main { padding-bottom: 96px; } /* 맨 위로 단추가 마지막 문단을 가리지 않게 (12차) */
.input.same-lang { background: transparent; border-style: dashed; color: var(--muted); }
.lp-radios { flex-direction: column; gap: 8px; }
.badge.shared { white-space: nowrap; flex: none; font-family: var(--sans); font-size: 11px; font-weight: 600; vertical-align: middle; color: var(--cool); border: 1px solid color-mix(in srgb, var(--cool) 40%, transparent); background: transparent; }

/* 관리자 구성원 표 (2026-10-13: 정렬·필터·검색, 1순위 유형·리더) */
.users-filters { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 8px; }
.users-filters > :first-child { grid-row: span 1; }
@media (max-width: 900px) { .users-filters { grid-template-columns: 1fr 1fr; } .users-filters > :first-child { grid-column: 1 / -1; } }
/* 거르기 묶음(휴대폰에서만 접는 상자로 그린다) */
@media (max-width: 600px) {
  .users-filters { grid-template-columns: 1fr; }
  .users-filters .filters-fold { display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .users-filters .filters-fold > summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }
  .users-filters .filters-fold-body { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 12px 12px; }
}
.users-table { max-height: 70vh; overflow: auto; }
.users-table table.grid thead th { position: sticky; top: 0; z-index: 1; }
.users-table table.grid td { font-size: 13px; }
.users-table tr.clickable { cursor: pointer; }
.users-table tr.clickable:hover td { background: var(--paper-2); }
.users-table .user-link { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.users-table .user-link:hover { text-decoration: underline; }
.cell-sub { font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.cell-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.sort-btn { all: unset; cursor: pointer; font-weight: 600; white-space: nowrap; }
.sort-btn:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
.sort-ind { color: var(--muted); font-size: 11px; }
th[aria-sort="ascending"] .sort-ind, th[aria-sort="descending"] .sort-ind { color: var(--ink); }
html.wide main { max-width: 1180px; }
.name-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 14px; }
.name-note .link-btn { padding: 0; white-space: nowrap; }

/* AI 팀 리포트 (2026-10-13) */
.report-text h3 { margin: 22px 0 8px; font-size: 17px; }
.report-text h3:first-child { margin-top: 4px; }
.report-text p { margin: 0 0 10px; line-height: 1.8; white-space: pre-wrap; }
.ctx-row { padding: 12px 0; border-top: 1px solid var(--line); }
.ctx-row.off { opacity: .6; }
@media print {
  #topbar, .tabs, .no-print, .to-top, main > .stack > div:first-child { display: none !important; }
  html.wide main, main { max-width: none; padding: 0; }
  body::before { display: none !important; }
  .report-card .notice.info { break-inside: avoid; }
  .report-card { box-shadow: none !important; border: 0 !important; }
}
#report-view { scroll-margin-top: calc(var(--topbar-h, 60px) + 12px); }
/* 리포트 화면: 목차·항목 카드·버전 비교 */
.report-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.report-toc a { font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-2); background: var(--card); }
.report-toc a:hover { border-color: var(--ink-2); }
.report-sec { scroll-margin-top: calc(var(--topbar-h, 60px) + 12px); }
.report-sec h3 { margin: 0 0 10px; }
.report-sec-body p { margin: 0 0 10px; line-height: 1.85; }
.report-sec-body p:last-child { margin-bottom: 0; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-cols > div + div { border-left: 1px dashed var(--line); padding-left: 20px; }
.compare-head { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
@media (max-width: 760px) { .compare-cols { grid-template-columns: 1fr; } .compare-cols > div + div { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 12px; } }
@media print { .report-sec { break-inside: auto; box-shadow: none !important; border: 0 !important; padding: 0 !important; } .report-sec h3 { break-after: avoid; } }
/* 리포트 (13차): 핵심 요약 강조, 버전 줄, 인쇄 전용 대외비 줄 */
.report-summary { border-left: 4px solid var(--cool); }
.report-summary h3 { color: var(--cool); }
.version-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.version-bar select { width: auto; max-width: 260px; }
.print-only { display: none; }
@media print { .print-only { display: block !important; } .report-confidential { font-weight: 700; border: 1px solid #000; padding: 6px 10px; margin: 0 0 8px; } }
.btn.small { min-height: 32px; padding: 4px 12px; font-size: 13px; }

/* ---------- 휴대폰 사용성 전수 점검 (2026-10-20): 일본은 PC 없이 휴대폰으로 쓰는 경우가 많다 ---------- */
.show-mobile { display: none; }
.check input { flex: none; } /* 글이 두 줄이 되면 체크 칸이 찌그러졌다 */
.to-top { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .show-mobile { display: block; }
  /* iPhone: 16px 미만 입력칸을 누르면 화면이 확대된다 (도입 문의 15px·조직도 국가 13px 등) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px; }
  .org-row select { min-height: 40px; }
  /* 관리 탭 9개: 옆으로 숨기지 않고 세 칸씩 */
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .tabs .tab { text-align: center; padding: 9px 2px; white-space: normal; font-size: 14px; line-height: 1.3; }
  /* 진단 카드도 다른 카드와 같은 여백 (2026-10-22: 왼쪽 16px로 줄였더니 노트 여백선(14px)에 글·단추가 붙었다. 휴대폰은 한 문항·세로 단추라 줄일 필요 없음) */
  .scale span, .scale span:lang(ja) { font-size: clamp(11px, calc((100vw - 56px) / 23), 13.5px); padding: 4px 0; line-height: 1.3; }
  /* 동의 목록: 번호 칸을 줄여 글 폭을 넓힌다 */
  .consent-list li { padding-left: 34px; }
  /* 작은 글자 링크를 누르기 쉽게 */
  .login-switch a, .login-noaccount a, .lp-link { display: inline-block; padding: 10px 2px; }
  .link-btn { min-height: 40px; }
  /* 구성원 표 → 카드 (표 안 가로·세로 이중 스크롤을 없앤다) */
  .users-table { max-height: none; overflow: visible; border: 0; background: none; border-radius: 0; }
  .users-table table.grid, .users-table table.grid tbody { display: block; width: 100%; }
  .users-table table.grid thead { display: none; }
  .users-table table.grid tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .users-table table.grid td { display: block; padding: 0; border: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; white-space: normal; } /* 표 기본의 nowrap 때문에 320px 일본어 카드가 넘쳤다 */
  .users-table table.grid td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .users-table table.grid td[data-empty] { display: none; }
  .users-table table.grid td .cell-sub, .users-table table.grid td .cell-badges { margin-top: 2px; }
  .users-table table.grid td[data-col=name] { order: -1; grid-column: 1 / -1; }
  .users-table table.grid td[data-col=name]::before { content: none; }
  .users-table table.grid td[data-col=unit] { grid-column: 1 / -1; }
  .users-table .user-link { font-size: 16px; white-space: normal; }
  .users-table tr.clickable:hover td { background: none; }
}
/* 아주 좁은 휴대폰(iPhone SE 등 320px): 로고 글자가 두 줄로 꺾이고 언어 단추가 잘렸다 → 다이얼만 */
@media (max-width: 380px) {
  .topbar .brand { font-size: 0; gap: 0; }
}
/* 일본어 제목·문단: 낱말(구) 단위 줄바꿈 (「一人/ひとり」 같은 끊김 방지, 지원 브라우저만) */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .lead { word-break: auto-phrase; }
/* 조직도 행의 국가 고르기: 넓은 화면은 작게, 휴대폰은 16px (위의 휴대폰 규칙) */
.compact-select { padding: 2px 6px; font-size: 13px; }
@media (max-width: 600px) { .compact-select { font-size: 16px; padding: 6px 8px; } }

/* ---------- 휴대폰 아래 탭 막대 (2026-10-20) ---------- */
.bottomnav { display: none; }
@media (max-width: 600px) {
  .bottomnav:not([hidden]) {
    display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--card); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
  }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 600; border-radius: 10px; min-width: 0; text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
  .bottomnav a.on { color: var(--warm); }
  .bottomnav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .has-bottomnav main { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .has-bottomnav .to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* 홈: 사람 목록이 첫 화면에 보이게 — 내 유형은 아래 탭 '내 결과'로, 지원 강도 근거 설명·눈금 글자는 숨김 */
  .has-bottomnav .mytype { display: none; }
  .support .support-basis, .support .thermo-scale { display: none; }
  .support:has(> .level) { padding-bottom: 46px; }
  .support:has(> .level)::after { bottom: 22px; }
  .support:has(> .level)::before { bottom: 19px; }
  .support .lead { font-size: 15px; margin-bottom: 0; }
}
/* 결과지 항목 접기 (2026-10-20) */
details.sec-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
details.sec-fold > summary::-webkit-details-marker { display: none; }
details.sec-fold > summary > h3 { margin: 0; flex: 1; }
details.sec-fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; flex: none; }
details.sec-fold[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.sec-fold[open] > summary { margin-bottom: 10px; }
details.sec-fold:not([open]) { padding-top: 14px; padding-bottom: 14px; }
@media (max-width: 600px) { details.sec-fold > summary { min-height: 32px; } }
/* 휴대폰: 표 → 카드 (labelCells가 붙인 칸 이름 사용) */
@media (max-width: 600px) {
  .cards-mobile { overflow: visible; border: 0; background: none; border-radius: 0; }
  .cards-mobile table.grid, .cards-mobile table.grid tbody { display: block; width: 100%; }
  .cards-mobile table.grid thead { display: none; }
  .cards-mobile table.grid tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .cards-mobile table.grid td { display: block; padding: 0; border: 0; font-size: 13px; min-width: 0; text-align: left; }
  .cards-mobile table.grid td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
  .cards-mobile table.grid td[data-title] { order: -1; grid-column: 1 / -1; font-size: 16px; font-weight: 700; }
  .cards-mobile table.grid td[data-title]::before { content: none; }
}
/* 휴대폰: 이름 병기 안내를 작게 (사람 목록이 첫 화면에 들어오게) */
@media (max-width: 600px) { .name-note { font-size: 13px; padding: 10px 12px; } .name-note .btn.small { margin-top: 6px; } }
/* 홈 맨 위 '이름 표기·읽는 법 확인' 의뢰 카드 */
.card.name-check { border-color: var(--warm); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warm) 40%, transparent); }
/* 개인정보 처리 안내: 긴 주소(URL)가 휴대폰 화면 밖으로 나가지 않게 */
.privacy p { overflow-wrap: anywhere; }

/* ---------- 14차 점검 (2026-10-20) ---------- */
@media (max-width: 600px) {
  /* 관리 탭: 세 칸 세 줄(약 190px)이 화면마다 반을 차지 → 네 칸 두 줄 */
  .tabs { grid-template-columns: repeat(4, 1fr); }
  .tabs .tab { font-size: 13px; padding: 8px 2px; }
  /* 진단: 고르면 글씨가 굵어져 줄 수가 바뀌고 단추 높이가 흔들렸다 → 굵기는 그대로, 색만 */
  .scale input:checked + span { font-weight: inherit; }
  /* 알림이 아래 탭 막대를 가렸다 */
  .has-bottomnav .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  /* 구성원 카드: 유형 배지가 카드 밖으로 */
  .users-table .type-chip { white-space: normal; max-width: 100%; }
}
/* 결과지 접기: 긴 제목·배지가 접기 표시를 카드 밖으로 밀었다 */
details.sec-fold > summary > h3 { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/* 링크 여러 개는 줄을 나눠 따로 누르게 */
.link-list { display: flex; flex-direction: column; gap: 6px; }
.link-list a { padding: 4px 0; }
/* 이름 병기: 원래 이름 중간에서 줄이 꺾이지 않게 */
.original { white-space: nowrap; }
/* 동료 공개 항목 설정 */
.disclosure-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.disclosure-row input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--warm); }
.disclosure-row:has(input:not(:checked)) { background: var(--paper-2); }
.disclosure-row .disc-state { font-size: 12px; margin-left: 6px; }
/* 관리 할 일 건수 표시 (아래 탭 '관리'·'할 일' 탭) */
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--warm-bright); color: var(--on-warm, #fff); font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; }
.nav-count[hidden] { display: none; }
.bottomnav a { position: relative; }
.bottomnav .nav-count { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
@media (max-width: 600px) { .tabs.tabs-detail { display: none; } }

/* ---------- 사번 로그인 (2026-10-21) ---------- */
.login-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--paper-2); }
.login-tab { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.login-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.login-tab:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
#company_code { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.login-company { font-size: 13px; margin-top: 4px; color: var(--ok, #2f7a55); min-height: 1em; }
.login-company.bad { color: var(--warn); }
.warn-text { color: var(--warn); }
.emp-login-toggle { padding: 10px 0; }
.emp-login-main { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.emp-login-qr svg { width: 132px; height: 132px; display: block; border-radius: 6px; }
.emp-login-code { font-family: var(--mono); font-size: 26px; letter-spacing: .14em; font-weight: 600; }
.emp-login-url { font-size: 13px; overflow-wrap: anywhere; color: var(--ink-2); }
@media (max-width: 480px) { .emp-login-main { grid-template-columns: 1fr; } .emp-login-qr svg { width: 160px; height: 160px; } }
/* 발급 결과·안내지 (화면에서는 덮개, 인쇄하면 안내지만) */
.issued-overlay { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: var(--paper); padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
.issued-head { max-width: 760px; margin: 0 auto 16px; display: grid; gap: 10px; }
.login-sheets { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.login-sheet, .login-poster { background: #fff; color: #111; border: 1px dashed #999; border-radius: 8px; padding: 18px 20px; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; border-bottom: 1px solid #ccc; padding-bottom: 6px; }
.sheet-name { font-size: 18px; font-weight: 700; margin: 10px 0; }
.sheet-body { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; }
.sheet-qr svg, .poster-qr svg { width: 100%; height: auto; display: block; }
.sheet-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; align-items: baseline; }
.sheet-kv dt { font-size: 13px; color: #555; }
.sheet-kv dd { margin: 0; font-size: 16px; }
.sheet-kv .mono { font-family: var(--mono); letter-spacing: .06em; white-space: nowrap; }
.sheet-kv .big { font-size: 22px; font-weight: 700; white-space: nowrap; }
.sheet-steps { margin: 12px 0 6px; padding-left: 1.4em; font-size: 14px; line-height: 1.7; }
.sheet-url { font-size: 12px; color: #555; overflow-wrap: anywhere; }
.sheet-note { font-size: 12px; color: #555; margin: 6px 0 0; }
.login-poster { max-width: 560px; margin: 0 auto; text-align: center; padding: 32px; }
.login-poster h1 { font-size: 26px; margin: 8px 0 18px; }
.poster-company { font-size: 16px; color: #555; }
.poster-qr { width: 240px; margin: 0 auto 14px; }
.poster-code { font-size: 20px; margin-bottom: 6px; }
.poster-code .mono { font-family: var(--mono); letter-spacing: .14em; font-weight: 700; }
.login-poster .sheet-steps { text-align: left; display: inline-block; }
@media (max-width: 480px) { .sheet-body { grid-template-columns: 96px 1fr; gap: 12px; } .sheet-kv .big { font-size: 19px; } }
@media print {
  html.printing body > *:not(.print-root) { display: none !important; }
  html.printing .print-root { position: static; overflow: visible; padding: 0; background: #fff; }
  html.printing .no-print { display: none !important; }
  /* A4 한 장에 안내지 두 장 (잘라서 나눠 준다) */
  html.printing .login-sheets { display: block; max-width: none; }
  html.printing .login-sheet { break-inside: avoid; height: 128mm; box-sizing: border-box; margin: 0 0 8mm; border-radius: 0; }
  html.printing .login-sheet:nth-child(2n) { break-after: page; }
  html.printing .login-poster { border: 0; }
}
.poster-title-line { display: block; }
.poster-title-line + .poster-title-line { font-size: 18px; font-weight: 600; color: #444; margin-top: 4px; }
.poster-lang + .poster-lang { border-top: 1px dashed #bbb; margin-top: 10px; padding-top: 6px; }

/* hidden 속성은 항상 숨김 (.btn의 inline-flex가 덮어 '더 보기'가 늘 보였다, 2026-10-21 점검) */
[hidden] { display: none !important; }

/* 머리 줄의 링크(<a>)도 단추처럼 가운데 정렬 (진단 중 「マイページ」가 위로 붙어 보였다, 2026-10-21) */
.topbar a.link-btn { display: inline-flex; align-items: center; }
@media (max-width: 600px) { .topbar a.link-btn.hide-mobile { display: none; } } /* 위 규칙이 휴대폰 숨김을 덮어 아래 탭과 메뉴가 두 번 보였다 */

/* ---------- 진단: 휴대폰 한 문항씩 (2026-10-21 E안) ---------- */
.question.one { border-bottom: 0; padding: 8px 0 4px; }
.question.one > legend.qt { font-size: 19px; line-height: 1.6; margin-bottom: 14px; }
.one-opts { display: grid; gap: 10px; clear: both; }
.one-opt {
  min-height: 54px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; text-align: center; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; touch-action: manipulation;
}
@media (hover: hover) { .one-opt:hover { border-color: var(--ink-2); } } /* 휴대폰에서는 누른 뒤 hover가 남아 다음 문항 같은 자리 단추가 고른 것처럼 보였다 (3차 점검) */
.one-opt[aria-pressed="true"] { background: var(--warm); border-color: var(--warm); color: var(--on-warm, #fff); }
.one-opt:focus-visible { outline: 2px solid var(--cool); outline-offset: 2px; }
.one-nav { margin-top: 18px; }
.one-nav .btn { min-width: 112px; }
.one-finish { width: 100%; margin-top: 16px; }
.one-resume { display: block; margin: 10px auto 0; font-size: 15px; text-decoration: underline; min-height: 44px; }
.one-map { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 12px; }
.one-map summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.one-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 8px; }
.one-chip { min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.one-chip.done { background: var(--paper-2); color: var(--ink); }
.one-chip.current { border: 2px solid var(--warm); color: var(--ink); font-weight: 700; }
.one-chip:disabled { opacity: .45; cursor: default; }
.question.one > legend.qt:focus { outline: none; }

/* 동의 화면 요약 + 자세히 (2026-10-21) */
.consent-sum li { color: var(--ink); }
.consent-sum-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.consent-sum-head strong { font-size: 15px; }
.consent-sum-text { margin-top: 2px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.consent-sum li.abroad .consent-sum-text { color: var(--ink); font-weight: 600; }
.abroad-badge { background: transparent; color: var(--cool); border: 1px solid var(--cool); }
.consent-more { margin-top: 4px; }
.consent-more summary { cursor: pointer; font-size: 13px; color: var(--cool); min-height: 36px; display: inline-flex; align-items: center; text-decoration: underline; }
.consent-more p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

/* 맥미니 T1 점검 (2026-10-21) */
.lp-office .lp-office-mail { color: #e6edf6; }               /* 어두운 남색 위 메일 주소 대비 1.33:1 → 읽히게 */
.lp-footer-links a, .lp-foot-offices a { display: inline-flex; align-items: center; min-height: 44px; } /* 휴대폰 터치 영역 */
input[aria-invalid="true"] { border-color: var(--warm); }

.mini-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-label { font-size: 11px; color: var(--muted); font-weight: 600; }

/* 새 버전 안내 띠 (2026-10-22) */
.update-banner { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 150; margin: 0 auto; max-width: 560px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 14px; }
.update-banner .btn { flex: none; white-space: nowrap; background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* 관리자 점검 2026-10-22: 할 일 위 현황, 미리 볼 사람 칩 */
.admin-overview .kv { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); }
.chip-x { all: unset; cursor: pointer; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--muted); }
.chip-x:hover, .chip-x:focus-visible { background: var(--line); color: var(--ink); }
/* 맥미니 점검 2026-10-22: 스크롤바가 생기고 없어질 때 화면이 7px 밀리지 않게 */
html { scrollbar-gutter: stable; }
/* 미리 볼 사람 편집: 아래 공표·취소 단추와 떨어뜨린다 (휴대폰에서 '추가' 옆을 잘못 누르기 쉬웠다) */
.preview-list { margin: 10px 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
@media (max-width: 600px) { .preview-list .btn-row { flex-direction: column; align-items: stretch; } .preview-list .btn { width: 100%; } }
/* 화면 모드 단추 (위쪽 막대) */
.theme-btn { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 10px; min-height: 36px; min-width: 36px; padding: 0 8px; font-size: 15px; line-height: 1; cursor: pointer; }
.theme-btn:hover { color: var(--ink); }
.theme-choice { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.theme-choice button { border: 0; background: transparent; color: var(--ink-2); padding: 8px 14px; min-height: 40px; font-size: 14px; cursor: pointer; }
.theme-choice button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* 콘솔: 이름 붙은 단추로 고르는 창 (2026-10-22) */
.choice-dialog { max-width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--card); color: var(--ink); }
.choice-dialog::backdrop { background: rgba(0, 0, 0, .35); }
@media (max-width: 600px) { .cards-mobile table.grid td { white-space: normal; overflow-wrap: anywhere; } }
/* 콘솔 위쪽 막대 휴대폰: 메일 주소를 숨기고 단추가 겹치지 않게 (2026-10-22 맥미니 점검: 日本語 단추가 화면 모드 단추 밑으로 들어갔다) */
@media (max-width: 600px) {
  .console .topbar { flex-wrap: wrap; row-gap: 6px; }
  .console .topbar > .muted { display: none; }
  .console .topbar .lang-toggle, .console .topbar .theme-btn { flex-shrink: 0; }
}

/* 부임·정착 지원 화면 (2026-10-26) */
.chip-check { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); min-height: 40px; }
.chip-check:has(input:checked) { border-color: var(--ink); font-weight: 600; }
.person-card:hover { border-color: var(--ink-2); }
.seal-mark.small { width: 42px; height: 42px; font-size: 12px; flex-shrink: 0; }
.checkin-q { border: 0; padding: 0; margin: 0; }
.checkin-q legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.checkin-scale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.checkin-opt { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.checkin-opt:has(input:checked) { border-color: var(--ink); font-weight: 700; }
.checkin-opt input { margin: 0; }
@media print {
  .no-print, .to-top, .toc, .bottomnav, #topbar, .update-banner { display: none !important; }
  .printable .card, .printable .section { break-inside: avoid; box-shadow: none !important; }
  .printable textarea { border: 1px solid #999; min-height: 8em; }
}

/* 2026-10-27 사용성 순환 시험 */
/* 막힌 단추가 '고장'처럼 흐리지 않게: 글자 대비는 유지하고 테두리·바탕으로 비활성 표시 */
.btn:disabled { opacity: 1; color: var(--muted); background: var(--paper-2); border-color: var(--line); }
.lang-toggle button.locked { opacity: .6; cursor: help; }
/* 진단 문항 목록: 아직 갈 수 없는 번호도 읽을 수 있게(대비), 갈 수 없음은 점선으로 */
.one-chip:disabled { opacity: 1; color: var(--muted); border-style: dashed; }
/* 손가락으로 누르기 쉬운 크기 */
label.check { min-height: 44px; }
.progress-row .link-btn { min-height: 44px; }
/* 되돌릴 수 없는 삭제 단추 */
.btn.danger { background: var(--card); color: #b3261e; border-color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .btn.danger { color: #ff8a80; border-color: #ff8a80; } }
:root[data-theme=dark] .btn.danger { color: #ff8a80; border-color: #ff8a80; }
.link-btn.link-danger { color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .link-btn.link-danger { color: #ff8a80; } }
:root[data-theme=dark] .link-btn.link-danger { color: #ff8a80; }

/* 2026-10-27 순환 시험 (기기·접근성) */
/* 어두운 화면: 2순위 막대가 바탕에 묻혔다 → 더 밝게 + 테두리 */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .chart .col.second { fill: color-mix(in srgb, var(--muted) 62%, var(--card)); stroke: var(--muted); stroke-width: .6; } :root:not([data-theme=light]) .chart-legend .sw.second { background: color-mix(in srgb, var(--muted) 62%, var(--card)); } }
:root[data-theme=dark] .chart .col.second { fill: color-mix(in srgb, var(--muted) 62%, var(--card)); stroke: var(--muted); stroke-width: .6; }
:root[data-theme=dark] .chart-legend .sw.second { background: color-mix(in srgb, var(--muted) 62%, var(--card)); }
/* 어두운 화면: '새 관계' 꼬리표 글자 대비 */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .badge.stage-new, :root:not([data-theme=light]) .badge.stage-planned { color: var(--ink); border: 1px solid var(--warm); } }
:root[data-theme=dark] .badge.stage-new, :root[data-theme=dark] .badge.stage-planned { color: var(--ink); border: 1px solid var(--warm); }
/* 'ポジティブ'가 원 안에서 두 줄로 쪼개졌다 */
.seal-mark { word-break: keep-all; }
.seal-mark.long { font-size: .62em; letter-spacing: -.02em; }
.seal-mark.small.long { font-size: 8px; letter-spacing: -.05em; } /* 42px 원 안에 5글자 (ポジティブ) — .long의 em이 부모 기준이라 넘쳤다, 2026-10-27 순환 2차 */
.seal-mark.sm.long { font-size: 10px; }
/* 관계 점검 척도: 끝의 '그렇다'만 다음 줄로 떨어졌다 → 양 끝 말은 위 줄, 숫자 다섯은 한 줄 */
.checkin-scale { display: grid; grid-template-columns: repeat(5, minmax(40px, 1fr)); gap: 6px; }
.checkin-scale > span.muted:first-child { grid-column: 1 / 3; grid-row: 1; }
.checkin-scale > span.muted:last-child { grid-column: 4 / 6; grid-row: 1; text-align: right; }
.checkin-scale > .checkin-opt { grid-row: 2; }
/* 아주 좁은 휴대폰: 이름 옆 꼬리표가 이름을 두 줄로 밀었다 → 꼬리표를 이름 아래로 */
@media (max-width: 360px) { .person { grid-template-columns: 1fr; } }
/* 조직도 행 단추: 간격·높이 */
.org-row .btn-row { gap: 8px; align-items: center; }
/* PC 관리 화면: 구성원 표 열이 잘리지 않게 조금 더 넓게 */
@media (min-width: 1280px) { html.wide main { max-width: 1320px; } }
.checkin-opt { min-height: 44px; }

/* 회사 가입: 프로모션 코드 확인 결과 (2026-10-28) */
.code-ok { color: var(--ok); }
.code-err { color: var(--warm); }
/* 콘솔 프로모션 코드 발행: 혜택 고르기 두 칸 (2026-10-28) */
.benefit-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.benefit-picks legend { grid-column: 1 / -1; }
.benefit-pick { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); cursor: pointer; min-height: 44px; }
.benefit-pick input { margin-top: 3px; flex: none; }
.benefit-pick:has(input:checked) { border-color: var(--warm); box-shadow: 0 0 0 3px var(--warm-soft); }
@media (max-width: 600px) { .benefit-picks { grid-template-columns: 1fr; } }
/* 콘솔 회사 목록 고르기 칸 (2026-10-30) */
.pick-cell { width: 36px; text-align: center; }
.pick-cell input { width: 20px; height: 20px; }
@media (max-width: 600px) { .cards-mobile td.pick-cell { position: absolute; right: 12px; top: 12px; width: auto; } .cards-mobile tr { position: relative; } }

/* 내 정보 PDF (19차): 320px에서 메일·긴 값이 카드 밖으로 나가지 않게 */
.export-sheet .kv strong { overflow-wrap: anywhere; min-width: 0; }

/* 320px 넘침 (2026-10-30 예외 시험): 접힌 카드 제목 줄과 긴 배지는 줄바꿈 */
.fold > summary, details.more > summary { flex-wrap: wrap; }
.fold > summary > *, details.more > summary > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .badge { white-space: normal; max-width: 100%; } }

/* 구성원 목록에서 바로 고치기 (2026-11-04) */
.users-table table.editing td .input { min-width: 140px; padding: 6px 8px; }
.users-table tr.edited td { background: var(--warm-soft); }
.users-table .edit-pick { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.bulk-edit-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: 0 6px 24px rgba(0,0,0,.18); font-weight: 700; }
.bulk-edit-bar .btn.secondary { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.4); }
@media (max-width: 600px) { .bulk-edit-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .users-table table.editing td .input { min-width: 0; width: 100%; } }

/* 인쇄는 화면 모드와 관계없이 흰 바탕·검은 글자 (2026-11-04 재테스트: 리포트 인쇄 글자가 전부 회색이라 흐렸다) */
@media print {
  :root { --ink: #111 !important; --ink-2: #222 !important; --muted: #444 !important; --paper: #fff !important; --paper-2: #f2f2f2 !important; --card: #fff !important; --line: #bbb !important; --dot: transparent !important; }
  body { background: #fff !important; color: #111 !important; }
  .prose, .prose p, .report-sec-body p, .lead, li { color: #111 !important; }
  .muted { color: #444 !important; }
}

/* 휴대폰 위쪽 막대 로그아웃 아이콘 (2026-11-04) — 좁은 화면은 영문 이름을 빼서 자리를 만든다 */
.logout-mobile { display: none; align-items: center; justify-content: center; padding: 0; }
.logout-mobile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .logout-mobile { display: inline-flex; } }
@media (max-width: 380px) { .topbar .brand .brand-text { display: none; } }