/* 업무 도구 주문 사전 — 페이지(tl-) + 앱 공통(ndt-) 스타일. 앱별 규칙은 apps/<id>.css 에서 [data-app="<id>"] 아래로만. */
/* hidden 속성은 언제나 숨김 (display 규칙이 이기지 못하게 — 10/1 공개본에서 빈 글상자가 보이던 원인) */
[hidden]{ display:none !important; }
/* ── 페이지 ── */
.tl-filter{ margin:22px 0 0; }
.tl-search{ display:block; width:100%; min-height:48px; padding:10px 14px; border:1px solid #E3E3E6; border-radius:12px; background:#FAFAFA; font:inherit; font-size:16px; color:var(--fg); }
.tl-search::placeholder{ color:#9AA1AC; }
.tl-row{ margin:12px 0 0; }
.tl-row-k{ margin:0 0 6px; font-size:12.5px; font-weight:800; letter-spacing:.03em; color:var(--muted); }
.tl-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.tl-chips::-webkit-scrollbar{ display:none; }
.tl-chip{ flex:none; min-height:40px; padding:0 13px; border:1px solid #E3E3E6; border-radius:999px; background:#fff; color:#444; font:inherit; font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
.tl-chip[aria-pressed="true"]{ background:var(--fg); border-color:var(--fg); color:#fff; }
.tl-chip i{ font-style:normal; margin-left:4px; font-weight:600; opacity:.55; }
.tl-sec{ margin:36px 0 0; scroll-margin-top:16px; }
.tl-sh{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 0 12px; font-size:22px; font-weight:900; letter-spacing:-.03em; color:var(--fg); }
.tl-sh small{ font-size:14px; font-weight:600; letter-spacing:0; color:var(--muted); }
.tl-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
.tl-card{ display:flex; flex-direction:column; gap:12px; min-width:0; padding:14px; border-radius:20px; background:#F5F5F7; scroll-margin-top:16px; }
.tl-card.wide{ grid-column:1 / -1; }
.tl-body{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.tl-name{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--fg); }
.tl-desc{ margin:0; font-size:14.5px; line-height:1.6; color:#555B64; }
.tl-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.tl-tags span{ font-size:12px; font-weight:700; padding:1px 9px; border-radius:999px; background:#E9EEFA; color:#314B86; }
.tl-tags span.sh{ background:#ECECEF; color:#555B64; }
.tl-tags span.xl{ background:#E7F6EC; color:#13703F; }
.tl-tips{ padding:10px 12px; border-radius:14px; background:#fff; border:1px solid #EBEBEE; }
.tl-tips-k{ margin:0 0 4px; font-size:13px; font-weight:800; color:var(--fg); }
.tl-tips ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.tl-tips li{ font-size:13.5px; line-height:1.55; color:#4B5059; }
.tl-tips li b{ display:inline-block; margin-right:4px; padding:0 7px; border-radius:6px; background:#F1F3F7; font-size:12px; font-weight:800; color:#314B86; }
.tl-tips li strong{ font-weight:700; color:var(--fg); }
.tl-make{ display:flex; flex-direction:column; gap:8px; padding-top:10px; border-top:1px dashed #DADCE1; }
.tl-make-k{ margin:0; font-size:14px; font-weight:800; color:var(--fg); }
.tl-make-k small{ display:block; font-size:12.5px; font-weight:500; color:#6B717B; }
.tl-env{ display:flex; gap:6px; flex-wrap:wrap; }
.tl-envb{ flex:1 1 0; min-width:96px; min-height:46px; padding:4px 8px; border:1.5px solid #E3E3E6; border-radius:12px; background:#fff; color:#444; font:inherit; font-size:14px; font-weight:700; line-height:1.3; cursor:pointer; }
.tl-envb small{ display:block; font-size:11px; font-weight:500; color:#8A8F98; }
.tl-envb[aria-pressed="true"]{ border-color:var(--fg); background:var(--fg); color:#fff; }
.tl-envb[aria-pressed="true"] small{ color:#C9CDD4; }
.tl-prompt{ margin:0; max-height:220px; overflow:auto; padding:12px; border:1px solid #E3E3E6; border-radius:12px; background:#fff; white-space:pre-wrap; word-break:keep-all; overflow-wrap:break-word; font:inherit; font-size:13px; line-height:1.6; color:#333; }
.tl-cprow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tl-copy{ min-height:46px; padding:0 18px; border:0; border-radius:12px; background:var(--accent); color:#fff; font:inherit; font-size:15px; font-weight:800; cursor:pointer; }
.tl-copy.done{ background:#0D7A43; }
.tl-cpn{ font-size:12.5px; color:#8A8F98; }
.tl-fb{ display:block; width:100%; height:180px; padding:10px; border:1px solid #E3E3E6; border-radius:10px; background:#fff; color:#333; font:inherit; font-size:13px; line-height:1.5; }
.tl-soon{ margin:14px 0 0; padding:12px 14px; border:1px dashed #D6D8DD; border-radius:16px; }
.tl-soon-k{ margin:0 0 8px; font-size:13px; font-weight:800; color:#6B717B; }
.tl-soon ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tl-soon li{ padding:3px 10px; border-radius:999px; background:#F3F4F6; font-size:13px; font-weight:600; color:#6B717B; }
.tl-soon li em{ font-style:normal; font-size:11px; font-weight:800; margin-left:4px; color:#8A6D00; }
.tl-empty{ margin:24px 0 0; padding:16px; border:1px dashed #D3D5DA; border-radius:16px; color:#555B64; font-size:15px; }
.tl-empty b{ color:var(--fg); }
.tl-chip:focus-visible,.tl-envb:focus-visible,.tl-copy:focus-visible,.tl-search:focus-visible{ outline:3px solid #93B4F5; outline-offset:2px; }
@media (max-width:760px){ .tl-grid{ grid-template-columns:minmax(0,1fr); } }

/* ── 목록: 타일 (대표 결정 L1·L2·L4, 2026-10-02) — 같은 크기라 줄이 저절로 맞음 ── */
.tl-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tl-tile{ min-width:0; display:flex; scroll-margin-top:16px; }
.tl-tile-a{ display:flex; flex-direction:column; width:100%; padding:10px; border-radius:18px; background:#F5F5F7; color:inherit; text-decoration:none; transition:background .15s; }
.tl-tile-a:hover{ background:#ECEDF1; }
.tl-tile-a:focus-visible{ outline:3px solid #93B4F5; outline-offset:2px; }
.tl-tile-pv{ display:block; aspect-ratio:47 / 30; overflow:hidden; border-radius:12px; background:#fff; border:1px solid #E6E7EB; }
.tl-tile-pv img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.tl-tile-b{ display:flex; flex-direction:column; gap:5px; flex:1; padding:10px 4px 2px; min-width:0; }
.tl-tile .tl-name{ font-size:17px; }
.tl-tile .tl-desc{ font-size:13.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tl-tile .tl-tags{ margin-top:1px; }
.tl-open{ margin-top:auto; padding-top:6px; font-size:14px; font-weight:800; color:var(--accent); }
@media (max-width:900px){ .tl-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
@media (max-width:560px){
  .tl-tile-a{ padding:7px; border-radius:14px; }
  .tl-tile-pv{ border-radius:9px; }
  .tl-tile-b{ padding:8px 2px 2px; gap:3px; }
  .tl-tile .tl-name{ font-size:15px; line-height:1.35; }
  .tl-tile .tl-desc{ font-size:12.5px; }
  .tl-tile .tl-tags{ display:none; }
  .tl-open{ font-size:13px; }
}
/* ── 도구 페이지 (/tools/<id>/) — 맨 위 도구 → 이럴 때 좋아요 → 프롬프트 → 같은 칸 다른 도구 (L3) ── */
.tl-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px; font-size:13px; font-weight:600; color:#5B6470; }
.tl-crumb a{ color:#5B6470; text-decoration:none; } .tl-crumb a:hover{ color:#111; text-decoration:underline; }
.tl-crumb [aria-current]{ color:#1A1A1A; }
.tl-dhd{ margin:6px 0 14px; }
.tl-dttl{ margin:4px 0 6px; font-size:clamp(26px,4.4vw,38px); font-weight:900; letter-spacing:-.04em; line-height:1.15; color:var(--fg); }
.tl-dsub{ margin:0 0 8px; max-width:720px; font-size:15.5px; line-height:1.6; color:var(--muted-strong); }
.tl-dcard{ padding:16px; }
.tl-dcard:not(.wide){ display:grid; grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:20px; align-items:start; }
.tl-dcard.wide .tl-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start; }
.tl-dcard.wide .tl-make{ border-top:0; padding-top:0; }
.tl-more{ margin:34px 0 0; }
.tl-more .tl-sh{ font-size:20px; }
.tl-more .tl-tiles + .tl-sh{ margin-top:26px; }
.tl-tile-pv.is-empty{ background:#ECEDF1; }
.tl-pn{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin:16px 0 0; font-size:14.5px; font-weight:700; }
.tl-pn a{ color:var(--accent); text-decoration:none; } .tl-pn a:hover{ text-decoration:underline; }
.tl-all{ display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:0 16px; border-radius:12px; border:1.5px solid var(--fg); color:var(--fg); font-weight:800; text-decoration:none; }
@media (max-width:900px){ .tl-dcard:not(.wide){ display:flex; align-items:stretch; } .tl-dcard.wide .tl-body{ display:flex; } .tl-dcard.wide .tl-make{ border-top:1px dashed #DADCE1; padding-top:10px; } }
@media (max-width:560px){ .tl-dcard{ padding:12px; } }

/* ── 앱 공통 ── */
.tl-app{ position:relative; min-width:0; padding:12px; border-radius:14px; background:#fff; border:1px solid #E6E7EB; color:#1A1A1A; font-size:14px; line-height:1.5; }
.tl-app.ndt-dark{ background:#11151F; border-color:#11151F; color:#E7E9EC; }
.tl-app-ph{ margin:0; padding:24px 0; text-align:center; color:#8A8F98; font-size:13px; }
.tl-app.ndt-ready .tl-app-ph{ display:none; }
.tl-app *{ box-sizing:border-box; }
.tl-app button{ font:inherit; }
.ndt-btn{ display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:40px; padding:0 14px; border:1px solid #D9DCE1; border-radius:10px; background:#fff; color:#1A1A1A; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
.ndt-btn:hover{ border-color:#B9BEC7; }
.ndt-btn.pri{ background:#1A1A1A; border-color:#1A1A1A; color:#fff; }
.ndt-btn.acc{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ndt-btn.ghost{ background:transparent; }
.ndt-btn.sm{ min-height:32px; padding:0 10px; font-size:13px; border-radius:8px; }
.ndt-btn.ndt-ok{ background:#0D7A43; border-color:#0D7A43; color:#fff; }
.ndt-btn.ndt-arm, .ndt-dark .ndt-btn.ndt-arm{ background:#B42318; border-color:#B42318; color:#fff; white-space:normal; line-height:1.2; font-size:12.5px; overflow:hidden; }
.ndt-btn.ndt-arm.ndt-arm-grow{ white-space:nowrap; width:auto; }
.ndt-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ndt-btn:disabled{ opacity:.5; cursor:default; }
.ndt-dark .ndt-btn{ background:#1C2230; border-color:#39414F; color:#E7E9EC; }
.ndt-dark .ndt-btn.pri{ background:#E7E9EC; border-color:#E7E9EC; color:#11151F; }
.ndt-in{ width:100%; min-height:40px; padding:6px 10px; border:1px solid #D9DCE1; border-radius:9px; background:#FAFAFB; color:#1A1A1A; font:inherit; font-size:14px; }
.ndt-in:focus{ outline:none; border-color:var(--accent); background:#fff; }
@media (max-width:560px){ .ndt-in, .tl-app input, .tl-app textarea, .tl-app select{ font-size:16px; } }   /* 아이폰: 16px 미만 칸을 누르면 화면이 확대됨 */
textarea.ndt-in{ min-height:90px; resize:vertical; line-height:1.5; }
.ndt-dark .ndt-in{ background:#1A2030; border-color:#39414F; color:#E7E9EC; }
.ndt-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ndt-col{ display:flex; flex-direction:column; gap:6px; }
.ndt-muted{ color:#6B717B; font-size:12.5px; }
.ndt-dark .ndt-muted{ color:#9BA3AE; }
.ndt-k{ margin:0; font-size:12.5px; font-weight:800; color:#4B5059; }
.ndt-dark .ndt-k{ color:#C7CCD4; }
.ndt-fb{ display:block; width:100%; min-height:120px; margin-top:8px; padding:8px; border:1.5px solid #F2B24C; border-radius:10px; font:inherit; font-size:12.5px; }
.ndt-err{ margin:0; padding:16px; color:#B42318; font-size:13.5px; }
.tl-app button:focus-visible, .tl-app input:focus-visible, .tl-app textarea:focus-visible, .tl-app select:focus-visible{ outline:3px solid #93B4F5; outline-offset:2px; }
/* 크게 보기 */
.tl-app.ndt-big{ position:fixed; inset:0; z-index:2147482500; margin:0; border-radius:0; overflow:auto; padding:clamp(16px,4vw,48px); }
html.ndt-big-open{ overflow:hidden; }
.ndt-big-x{ position:fixed; top:12px; right:12px; z-index:2; min-height:40px; padding:0 14px; border:1px solid #39414F; border-radius:10px; background:#1C2230; color:#E7E9EC; font-weight:800; cursor:pointer; }
.tl-app:not(.ndt-dark) .ndt-big-x{ background:#fff; color:#1A1A1A; border-color:#D9DCE1; }
/* 인쇄 */
#ndt-print{ display:none; }
@media print{
  body.ndt-printing > *{ display:none !important; }
  body.ndt-printing > #ndt-print{ display:block !important; }
  #ndt-print{ font-family:var(--font); color:#000; }
  #ndt-print .ndt-ptitle{ font-size:20px; margin:0 0 12px; }
  #ndt-print .ndt-pv{ white-space:pre-wrap; }
  #ndt-print, #ndt-print *{ font-variant-numeric:normal !important; }   /* PDF로 저장했을 때 숫자 복사·검색되게 */
  .tl-app.ndt-dark{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }   /* 페이지째 인쇄할 때 어두운 카드 배경 유지 */
  @page{ margin:14mm; }
}
@media (prefers-reduced-motion: reduce){ .tl-app *{ transition:none !important; animation:none !important; } }

/* ── 목록 3칸(2026-10-03, 10/2 밤 디자인 V1·V2 반영) ──
   왼쪽 📖 사용 설명서 = 연한 파랑 패널 · 가운데 도구 = 흰 바탕 · 오른쪽 🔥 순위 = 모션 사전과 같은 남색 카드
   글자: 본문 16px · 단계 제목 17px · 칸 제목 18px (대표 «글자가 작고 칸 구분이 안 된다»)
   1360px 이상 = 세 칸(양옆은 따라 내려옴) / 그보다 좁으면 설명서는 접힌 상자, 순위는 찾기 아래 한 줄 띠(폰 TOP 5) */
.tl-layout{ display:block; }
.tl-man-wrap{ margin:18px 0 0; }
.tl-man{ border:1px solid #C7DBFB; border-radius:16px; background:#F1F6FE; }
.tl-man > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; min-height:52px; padding:12px 16px; font-size:18px; font-weight:800; color:#1E3A8A; }
.tl-man > summary::-webkit-details-marker{ display:none; }
.tl-man > summary::after{ content:'펼치기 ▾'; margin-left:auto; font-size:14px; font-weight:700; color:#2563EB; }
.tl-man[open] > summary::after{ content:'접기 ▴'; }
.tl-man > summary small{ font-size:14px; font-weight:600; color:#3B5BA9; }
.tl-man-steps{ list-style:none; counter-reset:man; margin:0; padding:2px 16px 8px; }
.tl-man-steps > li{ counter-increment:man; position:relative; padding:14px 0 14px 42px; border-top:1px solid #D6E4FB; }
.tl-man-steps > li::before{ content:counter(man); position:absolute; left:0; top:13px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#2563EB; color:#fff; font-size:15px; font-weight:800; }
.tl-man-steps b{ display:block; font-size:17px; line-height:1.4; color:#14213D; }
.tl-man-steps p{ margin:4px 0 0; font-size:16px; line-height:1.6; color:#334155; }
.tl-man-steps em{ font-style:normal; font-weight:800; color:#1E3A8A; }
.tl-man-env{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.tl-man-env li{ font-size:15px; line-height:1.5; color:#334155; background:#fff; border:1px solid #D6E4FB; border-radius:10px; padding:7px 10px; }
.tl-man-env strong{ display:block; font-size:15.5px; color:#1E3A8A; }
.tl-man-faq{ padding:6px 16px 14px; border-top:1px solid #D6E4FB; }
.tl-man-k{ margin:10px 0 4px; font-size:14px; font-weight:800; letter-spacing:.02em; color:#3B5BA9; }
.tl-man-faq summary{ cursor:pointer; padding:9px 2px; min-height:40px; font-size:16px; font-weight:700; color:#14213D; }
.tl-man-faq details p{ margin:0 0 10px; padding:0 2px; font-size:15.5px; line-height:1.6; color:#334155; }

.rank-rail{ display:none; }
/* 좁은 화면 띠: 남색(넓은 화면 카드와 같은 색) */
.rank-strip{ display:flex; align-items:center; gap:10px; margin:16px 0 0; padding:9px 12px; background:#0F172A; border-radius:14px; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.rank-strip:empty{ display:none; }
.rank-strip::-webkit-scrollbar{ display:none; }
.rank-strip .rk-lab{ flex:0 0 auto; font-size:15px; font-weight:900; color:#fff; }
.rk-chips{ display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.rk-chips a{ display:inline-flex; align-items:center; gap:5px; min-height:36px; font-size:15px; font-weight:700; color:#F1F5F9; text-decoration:none; background:#1E293B; border:1px solid #334155; border-radius:999px; padding:5px 13px; }
.rk-chips a:hover, .rk-chips a:focus-visible{ border-color:#FDE68A; }
.rk-chips b{ color:#FDE68A; font-weight:900; }
.rank-strip .rk-when{ flex:0 0 auto; font-size:13px; color:#94A3B8; font-weight:600; }
.rk-d{ font-size:12.5px; font-weight:900; font-style:normal; }
.rk-d.up{ color:#FCA5A5; } .rk-d.down{ color:#93C5FD; } .rk-d.same{ color:#94A3B8; } .rk-d.new{ color:#fff; background:#E11D48; border-radius:6px; padding:0 6px; }
.rank-box{ background:#0F172A; color:#E5E9F0; border-radius:18px; padding:18px 14px 14px; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 28px rgba(15,23,42,.18); }
.rank-box .rk-h{ margin:0; font-size:18px; font-weight:900; color:#fff; }
.rank-box .rk-sub{ margin:4px 0 12px; font-size:14px; line-height:1.55; color:#93C5FD; }
.rk-list{ list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.rk-list a{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:3px 10px; align-items:center; min-height:46px; padding:8px 9px; border-radius:11px; text-decoration:none; color:#F1F5F9; }
.rk-list a:hover, .rk-list a:focus-visible{ background:#1E293B; }
.rk-list i{ font-style:normal; font-size:16px; font-weight:900; color:#FDE68A; text-align:right; }
.rk-list .rk-n{ font-size:16px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-list .rk-c{ font-size:13.5px; color:#CBD5E1; white-space:nowrap; }
.rk-list .rk-bar{ grid-column:2 / 4; height:6px; background:#1E293B; border-radius:3px; overflow:hidden; }
.rk-list .rk-bar em{ display:block; height:100%; background:#F43F5E; border-radius:3px; }
.rank-box .rk-note{ margin:12px 2px 0; font-size:13.5px; line-height:1.55; color:#94A3B8; }
@media (max-width:560px){ .rk-chips li:nth-child(n+6){ display:none; } }
@media (min-width:1360px){
  .lb-wrap:has(.tl-layout){ max-width:1560px; }
  .tl-layout{ display:grid; grid-template-columns:300px minmax(0,1fr) 272px; gap:30px; align-items:start; }
  .tl-man-wrap, .rank-rail{ position:sticky; top:14px; max-height:calc(100vh - 28px); overflow:auto; scrollbar-width:thin; }
  .tl-man-wrap{ margin:22px 0 0; }
  .tl-man > summary::after, .tl-man[open] > summary::after{ content:none; }
  .rank-rail{ display:block; margin:22px 0 0; }
  .rank-strip{ display:none; }
}
@media (max-width:560px){ .tl-man > summary small{ display:none; } }