/* 무탈언니 도구 — blog.css 토큰 위에 얹는 UI 레이어 */

.tool-head{padding:44px 0 26px}
.tool-head .crumb{margin-bottom:14px}
.tool-head h1{font-family:var(--serif);font-size:30px;line-height:1.4;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px}
.tool-head p.lede{font-size:15px;color:var(--dim);line-height:1.7;max-width:52ch}

/* ---------- 입력 패널 ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 20px}
.panel h2{font-family:var(--serif);font-size:17px;color:var(--ink);margin:0 0 14px}
.field{margin:0 0 14px}
.field > label{display:block;font-size:12.5px;font-weight:700;color:var(--dim);letter-spacing:.02em;margin:0 0 6px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row > *{flex:1 1 0;min-width:0}

input[type=number],input[type=text],select{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--text);
  background:var(--cream);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;appearance:none;-webkit-appearance:none;transition:border-color .12s,background .12s}
input[type=number]:focus,input[type=text]:focus,select:focus{outline:none;border-color:var(--lav);background:#FFF}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;font-variant-numeric:tabular-nums}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E6890' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;padding-right:34px}

.hint{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:6px}

/* 세그먼트 토글 */
.seg{display:flex;gap:4px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--dim);
  background:transparent;border:0;border-radius:9px;padding:9px 6px;cursor:pointer;transition:background .12s,color .12s}
.seg button[aria-pressed=true]{background:var(--lav-deep);color:#FFF}

/* 체크 토글 */
.opts{display:grid;gap:8px;margin:0 0 14px}
.opt{display:flex;align-items:flex-start;gap:10px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer}
.opt input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--lav-deep);flex:none}
.opt b{display:block;font-size:14px;color:var(--ink);font-weight:700}
.opt span{display:block;font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:2px}

.btn{display:block;width:100%;font-family:var(--sans);font-size:16px;font-weight:700;color:#FFF;
  background:var(--lav-deep);border:0;border-radius:13px;padding:15px;cursor:pointer;transition:opacity .12s}
.btn:hover{opacity:.9}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--lav-deep);border:1px solid var(--line);font-size:14px;padding:12px}

/* ---------- 결과 ---------- */
.result{display:none}
.result.on{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.headline{background:var(--ink);color:#FFF;border-radius:18px;padding:24px;margin:0 0 16px;text-align:center}
.headline .k{font-size:11.5px;letter-spacing:.16em;color:#A9A2CC;margin-bottom:9px}
.headline .v{font-family:var(--serif);font-size:29px;line-height:1.4}
.headline .s{font-size:13.5px;color:#C9C4E0;margin-top:9px;line-height:1.65}

/* 사주 네 기둥 */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:15px;overflow:hidden;text-align:center}
.pillar .lb{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--dim);background:var(--cream2);padding:7px 0}
.pillar .ch{padding:13px 4px 4px}
.pillar .ch:last-child{padding:4px 4px 13px}
.pillar .hz{font-family:var(--serif);font-size:34px;line-height:1.1;font-weight:700}
.pillar .ko{font-size:12px;color:var(--dim);margin-top:3px}
.pillar .wxl{font-size:11px;color:var(--dim);opacity:.85}
.pillar.empty .hz{color:var(--line)}

.c-mok{color:#4E8A60}.c-hwa{color:#C05F5F}.c-to{color:#A87F32}.c-geum{color:#6E7986}.c-su{color:#4F62A0}

/* 정보 그리드 */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin:0 0 16px}
.kv div{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.kv dt{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--dim);margin-bottom:4px}
.kv dd{margin:0;font-size:15px;color:var(--ink);font-weight:600;line-height:1.5}
.kv dd small{display:block;font-size:12.5px;color:var(--dim);font-weight:400;margin-top:2px}

/* 오행 막대 */
.wxbars{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:17px 19px;margin:0 0 16px}
.wxbars h3{font-size:13px;color:var(--dim);letter-spacing:.05em;margin:0 0 12px;font-weight:700}
.wxrow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.wxrow:last-child{margin-bottom:0}
.wxrow .n{width:18px;font-size:14px;font-weight:800;text-align:center}
.wxrow .track{flex:1;height:10px;background:var(--cream2);border-radius:5px;overflow:hidden}
.wxrow .fill{height:100%;border-radius:5px;transition:width .4s ease}
.wxrow .c{width:52px;text-align:right;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.b-mok{background:#6FA97E}.b-hwa{background:#D98686}.b-to{background:#C6A15B}.b-geum{background:#9AA3B0}.b-su{background:#6E7FB5}

/* 알림 줄 */
.flags{margin:0 0 16px;display:grid;gap:8px}
.flag{display:flex;gap:11px;align-items:flex-start;border-radius:13px;padding:13px 15px;font-size:13.5px;line-height:1.65}
.flag b{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:99px;margin-top:1px}
.flag.info{background:var(--lav-soft)}
.flag.info b{background:var(--lav-deep);color:#FFF}
.flag.warn{background:#FDF6E7;border:1px solid #EBD9AC}
.flag.warn b{background:#9A7212;color:#FFF}

/* 비교 카드 */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 16px}
.compare div{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px 15px;text-align:center}
.compare div.pick{border-color:var(--lav);background:var(--lav-soft)}
.compare dt{font-size:11.5px;font-weight:700;color:var(--dim);margin-bottom:6px}
.compare dd{margin:0;font-family:var(--serif);font-size:21px;color:var(--ink)}
.compare dd small{display:block;font-size:12px;color:var(--dim);font-family:var(--sans);margin-top:3px}

/* 표 */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--paper);border-radius:14px;overflow:hidden;margin:0 0 16px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:11px 13px;text-align:left}
.tbl th{background:var(--cream2);font-size:12.5px;font-weight:700;color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.now td{background:var(--lav-soft);font-weight:700}
.tbl td.num{font-variant-numeric:tabular-nums}

/* 도구 카드 (허브) */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin:0 0 34px}
.tool-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:22px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(34,32,58,.07);border-color:var(--lav)}
.tool-card .ic{font-family:var(--serif);font-size:26px;color:var(--lav-deep);line-height:1;margin-bottom:12px;display:block}
.tool-card h2{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 7px}
.tool-card p{font-size:13.5px;color:var(--dim);line-height:1.65;margin:0}

/* 도구 하단 설명 */
.tool-note{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:28px 0 0}
.tool-note h2{font-family:var(--serif);font-size:17px;color:var(--ink);margin:0 0 10px}
.tool-note h3{font-size:14px;color:var(--lav-deep);margin:16px 0 6px}
.tool-note p,.tool-note li{font-size:14px;line-height:1.75;color:var(--text);margin:0 0 9px}
.tool-note ul{padding-left:19px;margin:0 0 9px}
.tool-note p:last-child{margin-bottom:0}
.tool-note a{color:var(--lav-deep)}

.err{background:#FBEDED;border:1px solid #E9C9C9;color:#9A3B3B;border-radius:12px;padding:13px 15px;font-size:14px;margin:0 0 14px;display:none}
.err.on{display:block}

/* 도구 페이지의 FAQ (article 밖이라 별도 지정) */
.faq{margin:30px 0 0}
.faq > h2{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 14px}
.faq details p{font-size:14.5px;line-height:1.75}
.faq details p a{color:var(--lav-deep)}

@media(max-width:600px){
  .tool-head{padding:32px 0 20px}
  .tool-head h1{font-size:25px}
  .panel{padding:18px}
  .pillars{gap:6px}
  .pillar .hz{font-size:27px}
  .pillar .lb{font-size:10.5px}
  .headline .v{font-size:24px}
  .compare dd{font-size:19px}
}