/* /tools/activities.html 전용(활동 10칸, 수상 5칸). 공용은 tool-kit.css 가 맡고 여기엔 이 도구의 조각만 둔다.
   토큰은 tool-kit.css 의 --tk-* 그대로. 강조색은 티파니 하나, 빨강 없음. 한글에 양수 자간·대문자 변환·모노 폰트 없음. */
.sl-h2{font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.sl-h2 small{display:block;margin-top:5px;font-size:13.5px;font-weight:600;color:var(--tk-signal);letter-spacing:-.01em}
.sl-sec{margin-top:56px}
.sl-note{margin-top:12px;max-width:44em;font-size:15px;line-height:1.75;color:var(--tk-ink-soft)}
.sl-note b{color:var(--tk-ink);font-weight:700}

/* 규격 한 장(입력 없이 보이는 것) */
.sl-sheet{margin-top:22px;max-width:720px;padding:22px 24px 24px;background:var(--tk-white);border:1px solid var(--tk-ink);box-shadow:6px 6px 0 var(--tk-paper-deep)}
.sl-sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px;border-bottom:2px solid var(--tk-ink)}
.sl-sheet-head:not(:first-child){margin-top:30px}
.sl-sheet-head b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.sl-sheet-head span{font-size:14.5px;font-weight:700;color:var(--tk-signal);white-space:nowrap}
.sl-sheet-head span b{font-size:27px;font-weight:800;letter-spacing:-.04em;color:var(--tk-ink);font-variant-numeric:tabular-nums}
.sl-fields{margin:0;padding:0;list-style:none}
.sl-field{display:grid;grid-template-columns:168px minmax(0,1fr) 72px;gap:8px 14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--tk-line)}
.sl-field-name{font-size:14.5px;font-weight:700;line-height:1.4}
.sl-field-name small{display:block;font-size:12.5px;font-weight:500;color:var(--tk-muted);line-height:1.45}
.sl-bar{display:block;height:14px;width:calc(var(--w,1)*100%);border:1px solid var(--tk-line-dark);background:var(--tk-paper)}
.sl-limit{text-align:right;font-size:14px;font-weight:700;color:var(--tk-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-limit b{font-size:22px;font-weight:800;color:var(--tk-ink);letter-spacing:-.03em}
.sl-field-extra{display:block;font-size:14px;font-weight:600;color:var(--tk-ink-soft);border-bottom:0}
.sl-cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:14px 0 0;padding:0;list-style:none}
.sl-cells li{aspect-ratio:1/1.15;display:flex;align-items:flex-end;padding:5px 6px;border:1px solid var(--tk-line-dark);background:var(--tk-paper);font-size:12.5px;font-weight:700;color:var(--tk-ink-soft);font-variant-numeric:tabular-nums}
.sl-cells-5{grid-template-columns:repeat(5,minmax(0,1fr));max-width:calc(50% - 3px)}
.sl-cells-5 li{border-style:dashed}
.sl-changes{margin-top:28px;max-width:44em}
.sl-changes h3,.sl-sub h3{font-size:18.5px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.sl-changes h3 small,.sl-sub h3 small{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--tk-signal);letter-spacing:-.01em}
.sl-changes ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.sl-changes li{position:relative;padding-left:18px;font-size:16px;line-height:1.65}
.sl-changes li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--tk-signal-bright)}
.sl-changes li b{font-weight:700}
.sl-quote{margin-top:22px;max-width:44em}
.sl-quote q{quotes:"\201C" "\201D";font-weight:600;color:var(--tk-ink)}
.sl-quote .tk-src{margin-left:6px}
.sl-sub{margin-top:36px;padding-top:26px;border-top:1px solid var(--tk-line)}
.sl-sub>p{margin-top:6px;font-size:14.5px;color:var(--tk-ink-soft)}

/* 써 보기 */
.sl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.sl-slots{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:20px;max-width:760px}
.sl-slot{padding:18px 20px 20px;background:var(--tk-white);border:1px solid var(--tk-line);box-shadow:6px 6px 0 var(--tk-paper-deep)}
.sl-slot-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--tk-ink)}
.sl-slot-head h3{font-size:17px;font-weight:800;letter-spacing:-.03em}
.sl-slot-tools{display:flex;gap:6px}
.tk-btn-sm{min-height:38px;padding:0 12px;font-size:13.5px}
.sl-f{display:block;margin-top:16px}
.sl-f-name{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-size:14px;font-weight:700}
.sl-f-name small{font-weight:500;color:var(--tk-muted);margin-left:6px}
.sl-count{font-size:14px;font-weight:700;color:var(--tk-ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.sl-count.is-over{color:var(--tk-ink);text-decoration:underline;text-decoration-color:var(--tk-signal-bright);text-decoration-thickness:3px;text-underline-offset:4px}
.sl-f input,.sl-f textarea,.sl-hours input{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--tk-line-dark);border-radius:3px;background:var(--tk-white);color:var(--tk-ink);font:inherit;letter-spacing:inherit;line-height:1.5}
.sl-f textarea{min-height:116px;resize:vertical;display:block}
.tk-page :where(textarea):focus-visible{outline:3px solid var(--tk-signal-bright);outline-offset:3px}
.sl-over{margin-top:8px;padding:10px 12px;background:var(--tk-paper);border-left:3px solid var(--tk-signal-bright);font-size:14.5px;line-height:1.65;color:var(--tk-ink-soft);overflow-wrap:anywhere}
.sl-over b{display:block;margin-bottom:3px;font-size:12.5px;font-weight:700;color:var(--tk-signal)}
.sl-over s{color:var(--tk-muted);text-decoration-color:var(--tk-ink);text-decoration-thickness:2px}
.sl-grades{margin:16px 0 0;padding:0;border:0;min-width:0}
.sl-grades legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:700}
.sl-grades div{display:flex;flex-wrap:wrap;gap:8px}
.sl-grade{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:1px solid var(--tk-line-dark);border-radius:999px;background:var(--tk-white);font-size:14.5px;font-weight:600;cursor:pointer;user-select:none}
.sl-grade input{width:15px;height:15px;margin:0;accent-color:var(--tk-signal)}
.sl-grade.is-on{background:var(--tk-ink);border-color:var(--tk-ink);color:var(--tk-paper)}
.sl-hours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end;margin-top:16px}
.sl-hours label span{display:block;margin-bottom:6px;font-size:14px;font-weight:700}
.sl-hours input{font-variant-numeric:tabular-nums}
.sl-annual{padding-bottom:12px;font-size:14.5px;font-weight:600;color:var(--tk-ink-soft);white-space:nowrap}
.sl-annual b{font-size:18px;font-weight:800;color:var(--tk-ink);font-variant-numeric:tabular-nums}
.sl-status{margin-top:12px;min-height:22px;font-size:14px;color:var(--tk-ink-soft)}
.sl-status button{appearance:none;margin-left:8px;padding:0 10px;min-height:32px;border:1px solid var(--tk-ink);border-radius:3px;background:var(--tk-white);font-size:13.5px;font-weight:700;cursor:pointer}

/* 시간 합산 */
.sl-table{max-width:760px}
.sl-table tbody th small{font-weight:500}
.sl-table td b{font-weight:800;font-size:17px}
.sl-table tr.sl-total th,.sl-table tr.sl-total td{background:var(--tk-paper-deep)}
.sl-empty{margin-top:12px;font-size:15px;color:var(--tk-ink-soft)}

/* 칸 지도 */
.sl-count-line{margin-top:10px;font-size:14.5px;color:var(--tk-ink-soft)}
.sl-map{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:760px}
.sl-mcell{min-height:96px;padding:9px 10px 8px;border:1px solid var(--tk-line-dark);background:var(--tk-white)}
.sl-mcell.is-filled{border-color:var(--tk-ink);box-shadow:4px 4px 0 var(--tk-paper-deep)}
.sl-mcell b{font-size:12.5px;font-weight:800;color:var(--tk-ink-soft);font-variant-numeric:tabular-nums}
.sl-mbars{display:grid;gap:4px;margin-top:6px}
.sl-mbar{position:relative;display:block;height:8px;width:calc(var(--w,1)*100%);border:1px solid var(--tk-line);background:var(--tk-paper);overflow:hidden}
.sl-mbar::after{content:"";position:absolute;inset:0;width:calc(var(--f,0)*100%);background:var(--tk-ink)}
.sl-mticks{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.sl-mticks i{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 3px;border:1px solid var(--tk-line);font-style:normal;font-size:10.5px;font-weight:700;color:var(--tk-muted)}
.sl-mticks i.is-on{background:var(--tk-signal);border-color:var(--tk-signal);color:#fff}
.sl-map-h{margin-top:22px}
.sl-map-h .sl-mcell{min-height:58px;border-style:dashed}
.sl-map-h .sl-mcell span{display:block;margin-top:6px;font-size:12px;color:var(--tk-muted)}
.sl-map-title{margin-top:24px;font-size:14.5px;font-weight:700}

/* 내보내기 */
.sl-export .tk-actions{margin-top:16px;max-width:760px}
.sl-export .tk-affil{margin-top:22px}
.sl-export .tk-affil+.tk-affil{margin-top:8px}
.sl-next{margin-top:16px;font-size:15px}
.sl-next a{display:inline-flex;align-items:center;min-height:44px;color:var(--tk-signal);font-weight:700;text-underline-offset:3px}
/* 카카오톡·인스타그램 안 브라우저(키트가 html 에 tk-inapp 을 붙인다)에서는 파일 저장·인쇄가 조용히 실패하므로 숨기고 안내 문장을 보인다. */
.tk-inapp [data-slots-print],.tk-inapp [data-slots-export]{display:none}
.sl-src-meta{display:block;font-size:12.5px;line-height:1.55;color:var(--tk-muted)}
.sl-holds{margin-top:14px!important}
.sl-holds li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--tk-line)}
.sl-holds li span:first-child{font-weight:600;color:var(--tk-ink)}

/* 인쇄용 한 장(화면에서는 숨긴다) */
.sl-print{display:none}

@media(max-width:860px){
  .sl-sec{margin-top:44px}
  .sl-h2{font-size:22px}
  .sl-sheet{padding:16px 16px 18px}
  .sl-field{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name limit" "bar bar";gap:6px 12px}
  .sl-field-name{grid-area:name}
  .sl-limit{grid-area:limit;align-self:start}
  .sl-bar{grid-area:bar;height:12px}
  .sl-field-extra{grid-template-areas:none;grid-template-columns:1fr}
  .sl-cells{gap:4px}
  .sl-cells li{font-size:11px;padding:3px 4px}
  .sl-slot{padding:14px 14px 16px}
  .sl-slot-head{flex-wrap:wrap}
  .sl-hours{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sl-annual{grid-column:1/-1;padding-bottom:0}
  .sl-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-map-h{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .sl-map-h .sl-mcell{padding:8px 6px;min-height:52px}
  .sl-map-h .sl-mcell span{display:none}
}

@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html,body.tk-page{background:#fff!important;color:#000}
  .tk-mast,.tk-foot,.tk-skip,.tk-main>section,[data-ask-acros-root],.ask-acros-launcher{display:none!important}
  .sl-print{display:block!important;font-size:11pt;line-height:1.5;color:#000}
  .sl-print h1{font-size:20pt;font-weight:800;letter-spacing:-.03em;margin:0}
  .sl-print .sl-print-meta{margin:4pt 0 0;font-size:9.5pt;color:#444}
  .sl-print ol{margin:10pt 0 0;padding:0;list-style:none}
  .sl-print li{break-inside:avoid;margin-top:8pt;padding-top:6pt;border-top:1px solid #000}
  .sl-print li h2{font-size:12pt;font-weight:800;margin:0}
  .sl-print dl{margin:4pt 0 0;display:grid;grid-template-columns:7em minmax(0,1fr);gap:2pt 8pt}
  .sl-print dt{font-weight:700;color:#333;font-size:10pt}
  .sl-print dd{margin:0;overflow-wrap:anywhere}
  .sl-print dd small{color:#555;font-size:9pt}
  .sl-print dd s{color:#777}
  .sl-print table{margin-top:10pt;border-collapse:collapse;width:100%}
  .sl-print th,.sl-print td{text-align:left;padding:3pt 6pt 3pt 0;border-bottom:1px solid #999;font-size:10pt}
  .sl-print .sl-print-foot{margin-top:12pt;padding-top:6pt;border-top:1px solid #000;font-size:9pt;color:#444}
}