/* 딴쌤 툴즈 첫 화면과 안내 문서 공통. 명세: ddanssaem-brand/ux/proposals/2026-11-06-tools/spec.md 3장(D-1106-2, D-1106-5). */
:root { --ink: #2B2D31; --muted: #5C6370; --line: #E6E7EA; --card-line: #ECEDF0; --chip: #F2F3F5; --page: #F7F7F8; --accent: #2B6DE8; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: var(--ink); letter-spacing: -0.2px; background: var(--page); word-break: keep-all; overflow-wrap: break-word;
}
main { flex: 1; width: 100%; }
a { color: inherit; }

/* 머리: 공통 머리글 목록 꼴에서 로그인만 뺌 */
.hd { background: #fff; border-bottom: 1px solid var(--line); }
.hd-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 10px 24px; }
.hd-left { display: flex; align-items: center; min-width: 0; }
.hd-brand { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.hd-brand .m { width: 30px; height: 30px; }
.hd-brand .t { width: 52px; height: 25.3px; margin-left: 8px; color: var(--ink); }
.hd-slash { margin: 0 10px; font-size: 20px; font-weight: 300; color: #C4C8CF; }
.hd-name { display: flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 800; letter-spacing: -0.4px; text-decoration: none; }
.hd-nav { flex: 1; display: flex; justify-content: center; gap: 2px; }
.hd-nav a, .hd-pop a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.hd-nav a:hover, .hd-pop a:hover { background: var(--chip); }
.hd-nav a[aria-current], .hd-pop a[aria-current] { background: var(--chip); font-weight: 800; }
.hd-right { position: relative; min-width: 90px; display: flex; justify-content: flex-end; }
.hd-menu { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.hd-menu:hover { background: var(--chip); }
.hd-pop { position: absolute; right: 0; top: 48px; z-index: 20; display: flex; flex-direction: column; width: 176px; padding: 6px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.hd-pop[hidden] { display: none; }
.hd-pop a { border-radius: 12px; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 교구 목록 */
.wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px; }
.sec h2 { margin: 0 0 14px; font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.sec + .sec { margin-top: 36px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tcard { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 18px 16px 18px 18px; background: #fff;
  border: 1px solid var(--card-line); border-radius: 20px; text-decoration: none; }
.tcard:hover { border-color: #D5D8DD; }
.ticon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: #EAF1FD; color: #1D58C6; }
.tbody { flex: 1; min-width: 0; }
.tname { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.4px; }
.tdesc { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: 14px; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tchips span { padding: 2px 7px; border-radius: 6px; background: var(--chip); font-size: 12px; font-weight: 600; color: #4B5260; }
.tchev { flex: none; color: #A0A6B0; }

/* 안내 문서(이용 안내, 개인정보 처리방침) */
.doc { max-width: 760px; margin: 0 auto; padding: 32px 24px 56px; font-size: 15px; line-height: 1.75; }
.doc h1 { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.35; letter-spacing: -0.6px; }
.doc .doc-date { margin: 6px 0 28px; font-size: 13px; color: var(--muted); }
.doc h2 { margin: 36px 0 10px; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -0.5px; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 1.3em; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--accent); }
.doc .table { margin: 0 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc table { min-width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.doc th, .doc td { padding: 8px 10px; border: 1px solid var(--card-line); text-align: left; vertical-align: top; }
.doc th { background: #FAFAFB; font-weight: 700; white-space: nowrap; }

/* 바닥글: 허브와 같은 꼴 */
.ft { border-top: 1px solid var(--line); background: #fff; }
.ft-in { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding: 16px 24px; font-size: 13px; color: var(--muted); }
.ft-in .l { display: flex; align-items: center; gap: 8px; }
.ft-in nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.ft-in nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--muted); text-decoration: none; }
.ft-in nav a:hover { text-decoration: underline; }
.ft-in nav a.b { font-weight: 700; color: var(--ink); }

@media (max-width: 639px) {
  .hd-in { gap: 0; padding: 8px 8px 8px 16px; }
  .hd-brand .m { width: 26px; height: 26px; }
  .hd-brand .t { width: 45px; height: 22px; margin-left: 7px; }
  .hd-slash { margin: 0 6px; font-size: 18px; }
  .hd-name { font-size: 16px; }
  .hd-nav { display: none; }
  .hd-right { flex: 1; min-width: 0; }
  .hd-menu { display: grid; place-items: center; }
  .wrap { padding: 20px 16px 32px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .tcard { min-height: 84px; }
  .doc { padding: 24px 16px 40px; }
  .ft-in { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}
@media print { .hd, .ft { display: none; } }

/* 처리방침 표 다듬기(UX 11-06): 전화 칸은 한 줄, 칸 많은 표는 휴대폰에서 줄마다 '제목: 내용'으로 쌓는다. */
.doc td.nowrap { white-space: nowrap; }
@media (max-width: 639px) {
  .doc table.stack thead { display: none; }
  .doc table.stack, .doc table.stack tbody, .doc table.stack tr, .doc table.stack td { display: block; width: 100%; }
  .doc table.stack { border: 1px solid var(--card-line); }
  .doc table.stack td { border: 0; border-top: 1px solid var(--card-line); }
  .doc table.stack td:first-child { border-top: 0; }
  .doc table.stack tr + tr { border-top: 1px solid #D5D8DD; }
  .doc table.stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
}

/* 없는 주소(404.html): 허브 not-found와 같은 꼴 */
.nf { max-width: 460px; margin: 0 auto; padding: 64px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.nf h1 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -0.6px; }
.nf-btn { margin-top: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.nf-btn:hover { background: #3B3E44; }