/* =========================================================
   FileTool — 윈도우 XP 데스크톱 테마
   화면 중앙에 뜬 XP 창 + 우측하단 시작버튼/시작메뉴
   유지보수: 창 chrome·작업표시줄·시작메뉴는 app.js가 주입, 도구는 .card로 추가
   ========================================================= */
:root{
  --tb1:#3f8df5; --tb2:#1c6ef0; --tb3:#0a52e0;     /* 타이틀바/작업표시줄 파랑 */
  --panel:#ece9d8;      /* XP 다이얼로그 베이지 */
  --frame:#0a52e0;      /* 창 프레임 */
  --field-bd:#7f9db9;   /* 입력 테두리 */
  --blue:#2f6fd0; --blue-d:#2560bf; --blue-l:#5a8fd8;
  --green1:#7ed47e; --green2:#3c993c; --green3:#2e7d2e;  /* 시작버튼 */
  --text:#16263f; --muted:#54637e; --faint:#8190a8;
  --ok:#2e8b57; --rose:#c23b3b; --amber:#9a6a12;
  --sans:Tahoma,Verdana,"Malgun Gothic","맑은 고딕",Geneva,sans-serif;
  --mono:"Lucida Console",Consolas,monospace;
  --emoji:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  /* 별칭 */
  --bg:var(--panel); --surface:#fff; --border:#c9d3e2; --border-2:var(--field-bd);
  --brand:var(--blue); --brand-d:var(--blue-d); --brand-l:var(--blue-l); --brand-soft:#e8f0fc;
  --mint:var(--blue); --mint-2:#5a8fd8; --mint-ink:#fff; --radius:6px;
  --shadow-sm:0 1px 2px rgba(20,40,80,.12); --shadow:0 6px 22px rgba(8,24,60,.35);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:#2b5494;}
body{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--text);
  background:#3f6fb5;
  background:linear-gradient(180deg,#4a86cf 0%,#3568ad 60%,#2b5494 100%) fixed;
  min-height:100vh;overflow-x:hidden;}
.emoji{font-family:var(--emoji);font-style:normal;} .mono{font-family:var(--mono);}
a{color:#1f5bbf;text-decoration:none;} a:hover{text-decoration:underline;}
img{max-width:100%;}

/* ---------- 데스크톱 + 중앙 XP 창 ---------- */
#desktop{min-height:100vh;padding:18px 16px 56px;display:flex;justify-content:center;align-items:flex-start;}
.xp-window{width:100%;max-width:900px;background:var(--frame);border-radius:9px 9px 6px 6px;padding:0 3px 3px;box-shadow:var(--shadow);}
.xp-titlebar{display:flex;align-items:center;gap:8px;height:30px;padding:0 5px 0 9px;color:#fff;font-weight:700;font-size:13px;
  background:linear-gradient(180deg,#3f8df5 0,#1c6ef0 9%,#0a55e3 48%,#0a52e0 92%,#1b62e8);border-radius:7px 7px 0 0;text-shadow:0 1px 1px rgba(0,0,30,.45);}
.xp-titlebar .tico{width:17px;height:17px;border-radius:3px;background:#fff;color:var(--blue);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.xp-titlebar .ttl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp-titlebar h1{flex:1;margin:0;font-size:13px;font-weight:700;line-height:1.25;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xp-ctrl{display:flex;gap:2px;}
.xp-ctrl i{width:21px;height:18px;border-radius:3px;border:1px solid rgba(0,30,80,.45);display:inline-block;cursor:default;}
.xp-ctrl i.min{background:linear-gradient(#cfe0f7,#9fc0ec);}
.xp-ctrl i.max{background:linear-gradient(#cfe0f7,#9fc0ec);}
.xp-ctrl i.x{background:linear-gradient(#f3b39a,#d6492a);}
.xp-body{background:var(--panel);border-radius:0 0 4px 4px;padding:16px;}

/* 창 내부 헤더(히어로) */
.win-hero h1{font-size:clamp(18px,2.4vw,22px);font-weight:700;margin:2px 0 6px;color:var(--text);}
.win-hero .lead{font-size:13.5px;color:var(--muted);margin:0 0 4px;}
.crumb{font-size:12.5px;color:#6b7790;margin-bottom:6px;} .crumb a{color:#33405c;}

/* ---------- 카드(흰 본문 + 파란 헤더) ---------- */
.card,.panel{background:#fff;border:1px solid var(--border);border-radius:5px;padding:14px;margin:12px 0;overflow:hidden;box-shadow:var(--shadow-sm);}
.card-title{margin:-14px -14px 12px;padding:7px 12px;background:linear-gradient(180deg,#4187e6,#2a6fd6);color:#fff;font-size:12.5px;font-weight:700;text-shadow:0 1px 1px rgba(0,20,60,.35);}
.workbench{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start;}
@media(max-width:720px){.workbench{grid-template-columns:1fr;}}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;
  min-height:34px;padding:0 14px;border-radius:5px;cursor:pointer;text-decoration:none;border:1px solid transparent;}
.btn-primary{background:linear-gradient(180deg,#4d8ae8,#2f6fd0);color:#fff;border-color:#225eb8;box-shadow:0 1px 0 rgba(255,255,255,.3) inset;}
.btn-primary:hover{background:linear-gradient(180deg,#5f99ef,#2a66c8);color:#fff;text-decoration:none;}
.btn-ghost{background:#fff;color:#1f5bbf;border-color:var(--blue-l);}
.btn-ghost:hover{background:#eef4fd;border-color:var(--blue);text-decoration:none;}
.btn-danger{background:#fff;color:var(--rose);border-color:#e3a8a8;} .btn-danger:hover{background:#fdf0f0;}
.btn-sm{min-height:30px;padding:0 11px;font-size:12.5px;} .btn-block{width:100%;}

/* ---------- 폼 ---------- */
.field{margin-bottom:12px;} .field label{display:block;font-size:12.5px;font-weight:700;color:#33405c;margin-bottom:5px;}
.input,.select,textarea.input{width:100%;min-height:34px;padding:7px 10px;font-family:var(--sans);font-size:14px;color:var(--text);background:#fff;border:1px solid var(--field-bd);border-radius:3px;outline:none;}
textarea.input{min-height:90px;resize:vertical;}
.input:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,111,208,.22);}
.input::placeholder{color:#9aa6bd;}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2333405c' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px;}
.row-inline{display:flex;gap:8px;flex-wrap:wrap;} .row-inline>*{flex:1;min-width:0;}
.help{font-size:12px;color:#6b7790;margin-top:5px;}
.range-row{display:flex;align-items:center;gap:10px;}
.range-row input[type=range]{flex:1;accent-color:var(--blue);height:26px;}
.range-row .rv{font-family:var(--mono);min-width:54px;text-align:right;}
.checkrow{display:flex;align-items:center;gap:8px;font-size:13px;}
.checkrow input{width:17px;height:17px;accent-color:var(--blue);}

/* ---------- 답변박스/FAQ/콘텐츠(SEO) ---------- */
.answer-box{background:#f3f7fd;border:1px solid #cdddf2;border-radius:4px;padding:10px 13px;color:var(--text);font-size:13.5px;}
.answer-box b{color:#1f5bbf;}

/* ---------- 표(.t) — 본문 데이터 표 ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0;border:1px solid var(--border);border-radius:5px;}
.t{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
.t th,.t td{padding:8px 11px;text-align:left;border-bottom:1px solid #e3e9f2;}
.t thead th{background:#eaf1fb;color:#1f3a5f;font-weight:700;white-space:nowrap;border-bottom:1px solid #c7d6ea;}
.t tbody tr:nth-child(even){background:#f7faff;}
.t tbody tr:last-child td{border-bottom:0;}
.t td:not(:last-child),.t th:not(:last-child){border-right:1px solid #eef1f6;}
.prose{color:#2c3a52;font-size:13.5px;}
.prose h2{font-size:15px;font-weight:700;color:var(--text);margin:18px 0 8px;}
.prose h3{font-size:13.5px;font-weight:700;margin:14px 0 6px;}
.prose p{margin:0 0 10px;} .prose ul{padding-left:18px;margin:0 0 10px;} .prose li{margin:4px 0;}
.mini-h{font-size:13.5px;font-weight:700;color:var(--text);margin:16px 0 8px;}
.faq-acc{border:1px solid var(--border);border-radius:5px;overflow:hidden;background:#fff;}
.faq-acc details{border-top:1px solid #e6eaf1;} .faq-acc details:first-child{border-top:0;}
.faq-acc summary{cursor:pointer;padding:10px 13px;font-weight:700;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px;color:#23324d;}
.faq-acc summary::-webkit-details-marker{display:none;}
.faq-acc summary::before{content:"\25B6";color:var(--blue);font-size:9px;}
.faq-acc details[open] summary::before{content:"\25BC";}
.faq-acc .ans{padding:0 13px 11px 30px;color:#54637e;font-size:13px;}
.disclaimer{font-size:11.5px;color:#8190a8;border-top:1px solid #d8d2bd;margin-top:16px;padding-top:12px;}

/* 도구 카드/관련/디렉터리 (창 내부 보조) */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;}
.related a{display:block;padding:11px 13px;background:#fff;border:1px solid var(--border);border-radius:5px;text-decoration:none;}
.related a:hover{border-color:var(--blue);background:#f7faff;}
.related .rt{font-weight:700;color:var(--text);font-size:13.5px;} .related .rd{color:var(--muted);font-size:12px;margin-top:2px;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;}
.stat{background:#f3f7fd;border:1px solid #d3e0f3;border-radius:4px;padding:10px 12px;}
.stat .k{font-size:12px;color:#566;font-weight:700;} .stat .v{font-size:20px;font-weight:700;margin-top:2px;} .stat .v.mint{color:var(--blue);}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:4px;background:#eef1f6;color:#667;}
.pill.warn{background:#fdeeee;color:var(--rose);} .pill.soon{background:#fff6df;color:var(--amber);}
.share-wrap{text-align:center;display:flex;justify-content:center;gap:8px;margin:14px 0;flex-wrap:wrap;}

/* ---------- 작업표시줄(하단) — 시작버튼 우측 ---------- */
.taskbar{position:fixed;bottom:0;left:0;right:0;z-index:80;background:#2b5494;}
.taskbar .tb-inner{pointer-events:auto;max-width:906px;margin:0 auto;height:38px;display:flex;align-items:center;gap:8px;padding:0 8px;
  background:linear-gradient(180deg,#3f8df5 0,#1c6ef0 9%,#0a55e3 16%,#1257dd 100%);
  border:1px solid #08348f;border-bottom:0;border-radius:7px 7px 0 0;box-shadow:0 -2px 10px rgba(8,24,60,.28);}
@media(max-width:600px){.taskbar .tb-inner{padding:0 6px;}}
.taskbar .tray{order:2;display:flex;align-items:center;gap:8px;height:28px;margin-left:auto;padding:0 12px;background:linear-gradient(#1e6fe6,#0a4fd0);border:1px solid #08348f;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;}
.taskbar .clock{color:#fff;font-size:12.5px;font-weight:700;}
.start-btn{order:1;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 17px 0 13px;margin:0;
  font-weight:700;font-style:italic;font-size:15px;color:#fff;border:none;cursor:pointer;
  background:linear-gradient(180deg,#7ed47e,#3c993c 55%,#2e7d2e);border-radius:5px 14px 14px 5px;
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.45) inset;text-shadow:0 1px 1px rgba(0,40,0,.5);}
.start-btn .si{font-style:normal;font-family:var(--emoji);}
.start-btn:hover{filter:brightness(1.06);}

/* ---------- 시작 메뉴(우측 하단 팝업) ---------- */
.start-menu{position:absolute;left:max(8px, calc(50vw - 453px));bottom:40px;width:300px;max-width:calc(100vw - 16px);z-index:90;
  background:#fff;border:2px solid #0a52e0;border-radius:8px 8px 6px 6px;box-shadow:var(--shadow);overflow:hidden;overflow-y:auto;max-height:calc(100vh - 64px);display:none;}
.start-menu.open{display:block;}
.start-menu .sm-head{display:flex;align-items:center;gap:9px;padding:9px 12px;color:#fff;font-weight:700;
  background:linear-gradient(180deg,#3f8df5,#0a52e0);}
.start-menu .sm-head .av{width:30px;height:30px;border-radius:4px;background:#fff;color:var(--blue);font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.start-menu .sm-search{padding:8px 10px;border-bottom:1px solid #e0e4ec;}
.start-menu .sm-search input{width:100%;min-height:32px;padding:6px 10px;border:1px solid #9fb2cc;border-radius:4px;font-size:13px;font-family:var(--sans);color:var(--text);outline:none;}
.start-menu .sm-search input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(47,111,208,.2);}
.start-menu .sm-empty{padding:14px;color:#8190a8;font-size:13px;text-align:center;}
.start-menu .sm-sec{font-size:11px;font-weight:700;color:#7a849a;text-transform:uppercase;letter-spacing:.04em;padding:9px 13px 4px;}
.start-menu .sm-item{display:flex;align-items:center;gap:10px;padding:8px 13px;color:#16263f;font-size:13.5px;text-decoration:none;}
.start-menu .sm-item .ico{font-family:var(--emoji);font-size:17px;width:22px;text-align:center;}
.start-menu .sm-item:hover{background:#2f6fd0;color:#fff;text-decoration:none;}
.start-menu .sm-item.soon{color:#9098a8;cursor:default;} .start-menu .sm-item.soon:hover{background:#eef1f6;color:#9098a8;}
.start-menu .sm-item.soon::after{content:"준비 중";margin-left:auto;font-size:10.5px;color:#aab;}
.start-menu .sm-sep{height:1px;background:#dfe3ea;margin:5px 0;}
.start-menu .sm-foot{background:#ece9d8;padding:7px 13px;display:flex;gap:14px;}
.start-menu .sm-foot a{font-size:12px;color:#33405c;}

/* 토스트 */
.toast-host{position:fixed;left:0;right:0;bottom:48px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:200;pointer-events:none;}
.toast{background:#ffffe1;border:1px solid #b9b06a;color:#3a3318;padding:9px 15px;border-radius:4px;font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.2s;}
.toast.show{opacity:1;transform:translateY(0);} .toast.ok{border-color:#7bbf7b;}

/* 유틸 */
.muted{color:var(--muted);} .center{text-align:center;} .mt0{margin-top:0;} .mb0{margin-bottom:0;}
.spacer{height:8px;} .divider{height:1px;background:#dfe3ea;margin:12px 0;border:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

@media(max-width:600px){
  #desktop{padding:12px 8px 60px;}
  .xp-body{padding:12px;}
  .input,.select{font-size:16px;min-height:42px;}  /* iOS 줌방지+터치 */
  .btn{min-height:42px;} .btn-sm{min-height:36px;}
  .start-menu{width:auto;left:8px;right:8px;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---------- 정적 내부링크 푸터(전체 도구 사이트맵 · 크롤러용) ---------- */
.site-foot{margin:14px 0 4px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:5px;box-shadow:var(--shadow-sm);font-size:12.5px;}
.site-foot .sf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 16px;}
@media(max-width:640px){.site-foot .sf-grid{grid-template-columns:1fr 1fr;}}
.site-foot .sf-h{font-weight:700;color:var(--text);margin:0 0 6px;font-size:12px;border-bottom:1px solid var(--border);padding-bottom:4px;letter-spacing:.2px;}
.site-foot ul{list-style:none;margin:0;padding:0;}
.site-foot li{margin:3px 0;line-height:1.5;}
.site-foot a{color:#1f5bbf;}
.site-foot .sf-copy{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--border);color:var(--muted);font-size:11.5px;text-align:center;}