/* 계산기·조합기 같은 입력형 도구 공통 */
.tool-box{padding:20px}
.fields{display:grid;gap:14px}
.field label,.field .lbl{display:block;font-size:13px;font-weight:700;color:var(--text2);margin-bottom:6px}
.field small{display:block;margin-top:5px;font-size:12px;color:var(--text3)}
.inp,.tool-box textarea,.tool-box select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px}
.inp:focus,.tool-box textarea:focus,.tool-box select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.inp-unit{position:relative}
.inp-unit .inp{padding-right:42px;text-align:right;font-variant-numeric:tabular-nums}
.inp-unit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.tool-box textarea{min-height:150px;resize:vertical;line-height:1.6}
.row-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.toggle{position:relative;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle span{display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--text2);background:var(--bg)}
.toggle input:checked+span{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:700}
.toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hint{margin:10px 0 0;font-size:12.5px;color:var(--text3)}

.out-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:24px 0 10px}
.out-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.out-title b{font-size:16px}
.out-bar .btn{padding:8px 14px;font-size:13.5px}

/* 안내 본문 (검색 로봇이 읽는 텍스트) */
.guide{margin-top:48px;padding:24px 24px 20px;box-shadow:none;color:var(--text2);font-size:14.5px;line-height:1.75}
.guide h2{font-size:22px;color:var(--text);margin:0 0 8px;letter-spacing:-.02em}
.guide h3{font-size:16.5px;color:var(--text);margin:28px 0 8px}
.guide p{margin:0}
.guide p+p{margin-top:8px}
.guide ul,.guide ol{margin:8px 0;padding-left:20px}
.guide li+li{margin-top:4px}
.guide b{color:var(--text)}
/* 안내 펼치기/접기: 제목과 첫 문단만 보이고 나머지는 접힘 (접힌 내용도 HTML에 그대로 있어 검색 로봇이 읽음) */
.guide-more{margin-top:4px}
.guide-more summary{list-style:none;cursor:pointer;margin-top:16px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface2);color:var(--text);font-weight:700;font-size:14px;text-align:center}
.guide-more summary::-webkit-details-marker{display:none}
.guide-more summary:hover{border-color:var(--accent);color:var(--accent)}
.guide-more[open] summary{margin-bottom:8px}
.guide-more .when-open,.guide-more[open] .when-closed{display:none}
.guide-more[open] .when-open{display:inline}
.faq{margin:0}
.faq dt{color:var(--text);font-weight:700;margin-top:16px}
.faq dt:first-child{margin-top:0}
.faq dd{margin:4px 0 0}

@media (max-width:640px){
  .tool-box{padding:14px}
  .guide{padding:18px 16px 16px;margin-top:36px}
  .guide-more summary{font-size:13px}
}