/* 일꾼 무료 셀러 도구 (ilggun.com/tools/). landing.css 토큰 위에 얹는다. 머리 · 바닥 띠는 guide.css 와 같은 모양
   (guide.css 를 따로 받지 않게 필요한 줄만 옮겨 왔다). 흰 바탕 단색: 색은 파란 신호 하나(#0066ff)뿐,
   통과 · 안 맞음은 아이콘과 글자로만 구분하고 색 칠은 하지 않는다. 360px 폭부터 맞춘다(안드로이드 앱에도 들어감).
   인라인 스타일 · 스크립트 없음 (CSP). */

:root {
  --t-line: #e2e8f0;
  --t-soft: #f8fafc;
  --t-muted: #64748b;
  --t-ink: #0f172a;
  --t-ink-2: #334155;
  --t-accent: #0066ff;
}

body { background: #ffffff; color: var(--t-ink); }

/* ---------- 머리 띠 (guide.css 와 같은 모양) ---------- */
.guide-top { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--t-line); backdrop-filter: blur(8px); }
.guide-top-row { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; min-height: 56px; }
.guide-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--t-ink); }
.guide-mark { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--t-line); }
.guide-top-links { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
.guide-top-links a { color: var(--t-muted); }
.guide-top-links a:hover, .guide-top-links a.is-current { color: var(--t-ink); }
.guide-top-links a.is-current { font-weight: 600; }

/* ---------- 바닥 띠 ---------- */
.guide-foot { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; border-top: 1px solid var(--t-line); font-size: 13px; color: var(--t-muted); }
.guide-foot-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; }
.guide-foot a { color: var(--t-muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 틀 ---------- */
.tools-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; }
.tools-crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 20px; font-size: 13px; color: var(--t-muted); }
.tools-crumbs a { color: var(--t-muted); }
.tools-crumbs a:hover { color: var(--t-ink); text-decoration: underline; text-underline-offset: 2px; }

.tool-head { padding: 14px 0 22px; }
.tools-hub .tool-head { padding-top: 32px; }
.tool-kicker { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--t-muted); }
.tool-head h1 { font-size: 26px; line-height: 1.3; font-weight: 750; letter-spacing: -.025em; }
.tool-lead { margin-top: 12px; max-width: 720px; font-size: 16px; line-height: 1.7; color: var(--t-ink-2); }

.tool-grid { display: grid; gap: 16px; align-items: start; }
.panel { border: 1px solid var(--t-line); border-radius: 16px; background: #ffffff; padding: 18px 16px; min-width: 0; }
.panel-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: var(--t-ink); }
.panel-title .icon { color: var(--t-muted); }

/* ---------- 입력 ---------- */
.tool-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { font-size: 14px; font-weight: 600; color: var(--t-ink); }
.field-hint { font-size: 13px; line-height: 1.5; color: var(--t-muted); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.input-box { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 1px solid var(--t-line); border-radius: 10px; background: #ffffff; transition: border-color .15s, box-shadow .15s; }
.input-box:focus-within { border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(0, 102, 255, .12); }
.tool-form > *, .more-body > *, .field-row > * { min-width: 0; }
/* width 0 + flex: 입력칸 기본 폭(size=20)이 좁은 화면에서 줄을 밀어내지 않게 */
.input-box input { flex: 1 1 0; width: 0; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 17px; font-variant-numeric: tabular-nums; }
.input-box input::placeholder { color: #a0aab8; }
.input-unit { flex: none; font-size: 14px; color: var(--t-muted); }
.input-box input:focus-visible { outline: none; }

.fx-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-status { font-size: 13px; line-height: 1.5; color: var(--t-muted); }
.link-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--t-accent); cursor: pointer; }
.link-btn .icon { width: 15px; height: 15px; }

.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--t-ink-2); cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--t-ink); }

.more { border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-soft); }
.more > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .icon { color: var(--t-muted); transition: transform .15s; }
.more[open] > summary .icon { transform: rotate(180deg); }
.more-body { display: grid; gap: 16px; padding: 4px 14px 16px; }
.more-body .input-box { background: #ffffff; }

.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 결과 ---------- */
.result-key { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; border: 1px solid var(--t-line); border-radius: 12px; overflow: hidden; background: var(--t-line); }
.result-key > div { padding: 14px; background: #ffffff; min-width: 0; }
.result-key .is-wide { grid-column: 1 / -1; }
.result-label { display: block; font-size: 13px; color: var(--t-muted); }
.result-value { display: block; margin-top: 4px; font-size: 24px; line-height: 1.25; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--t-ink); overflow-wrap: anywhere; }
.result-value.is-accent { color: var(--t-accent); }
.result-unit { font-size: 15px; font-weight: 600; margin-left: 2px; color: var(--t-ink-2); }
.result-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--t-muted); }

.result-list { margin-top: 14px; border-top: 1px solid var(--t-line); }
.result-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--t-line); font-size: 14px; }
.result-list dt { color: var(--t-ink-2); min-width: 0; }
.result-list dd { margin: 0; flex: 0 1 auto; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.result-list .is-sub dt { padding-left: 12px; color: var(--t-muted); }
.result-empty { padding: 20px 0 6px; font-size: 14px; color: var(--t-muted); }

/* ---------- 공유 ---------- */
.share-box { margin-top: 16px; display: grid; gap: 10px; }
.share-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.share-actions .btn { width: 100%; padding: 0 12px; font-size: 15px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .icon { width: 17px; height: 17px; }

/* ---------- 이미지 검사 ---------- */
.drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 28px 16px; border: 1px dashed #cbd5e1; border-radius: 14px; background: var(--t-soft); text-align: center; cursor: pointer; transition: border-color .15s; }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--t-accent); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop .icon { width: 28px; height: 28px; color: var(--t-ink-2); }
.drop-title { font-size: 16px; font-weight: 700; }
.drop-hint { font-size: 13px; color: var(--t-muted); }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--t-ink-2); }
.privacy-note .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--t-ink-2); }

.img-summary { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--t-ink-2); }
.img-summary strong { font-size: 18px; color: var(--t-ink); }
.img-list { display: grid; gap: 12px; }
.img-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--t-line); border-radius: 12px; }
.img-thumb { width: 88px; height: 88px; border: 1px solid var(--t-line); border-radius: 8px; background: var(--t-soft); object-fit: contain; }
.img-role { font-size: 12px; font-weight: 700; color: var(--t-muted); }
.img-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-meta { margin-top: 2px; font-size: 13px; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.img-verdict { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--t-ink); }
.rule-list { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--t-line); }
.rule { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--t-ink-2); }
.rule .icon { width: 16px; height: 16px; margin-top: 2px; }
.rule.is-fail { color: var(--t-ink); font-weight: 600; }
.rule.is-fail .icon { stroke-width: 2.25; }
.rule.is-advice { color: var(--t-muted); }
.rule-state { flex: none; min-width: 3.4em; font-weight: 700; }
.extra-note { margin-top: 12px; font-size: 13px; color: var(--t-muted); }

/* ---------- 검색어 ---------- */
.kw-input { width: 100%; min-height: 160px; padding: 12px; border: 1px solid var(--t-line); border-radius: 10px; background: #ffffff; font-size: 16px; line-height: 1.6; resize: vertical; }
.kw-input:focus { outline: 0; border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(0, 102, 255, .12); }
.kw-count { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--t-ink-2); }
.kw-count strong { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--t-ink); }
.kw-count strong.is-accent { color: var(--t-accent); }
.kw-notes { display: grid; gap: 4px; margin-top: 6px; font-size: 13px; color: var(--t-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px; border: 1px solid var(--t-line); border-radius: 999px; background: var(--t-soft); font-size: 14px; color: var(--t-ink); }
.chip-n { font-size: 12px; font-weight: 700; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.is-over { border-style: dashed; background: #ffffff; color: var(--t-muted); text-decoration: line-through; }
.chip.is-over .chip-n { text-decoration: none; }
.kw-output { width: 100%; min-height: 96px; margin-top: 12px; padding: 12px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-soft); font-size: 15px; line-height: 1.6; resize: vertical; }

/* ---------- 알아 두면 좋은 점 · 다른 도구 · CTA ---------- */
.tool-section { margin-top: 36px; }
.tool-section h2 { margin-bottom: 12px; font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -.015em; }
.tool-tip { max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--t-ink-2); }
.tool-source { margin-top: 10px; font-size: 14px; color: var(--t-muted); }
.tool-source a, .tool-tip a { color: var(--t-ink); text-decoration: underline; text-decoration-color: var(--t-accent); text-underline-offset: 3px; }

/* 이렇게 계산합니다 (식 한 줄 + 풀이 한 줄) · 자주 묻는 질문 (landing.css 의 .faq 를 왼쪽 정렬로) */
.how-list { display: grid; gap: 12px; max-width: 760px; padding-left: 22px; counter-reset: none; }
.how-list li { padding-left: 4px; font-size: 15px; line-height: 1.65; color: var(--t-ink-2); }
.how-list li::marker { font-weight: 700; color: var(--t-muted); font-variant-numeric: tabular-nums; }
.how-list strong { display: block; font-weight: 700; color: var(--t-ink); overflow-wrap: anywhere; }
.how-list span { display: block; margin-top: 2px; font-size: 14px; color: var(--t-muted); }
.tool-section .faq { max-width: 760px; margin-inline: 0; }
.tool-section .faq summary { font-size: 16px; padding: 16px 4px; }
.tool-section .faq details p { font-size: 15px; line-height: 1.7; padding-bottom: 18px; }

.tool-cards { display: grid; gap: 12px; }
.tool-cards > li { display: grid; }
.tool-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--t-line); border-radius: 16px; background: #ffffff; transition: border-color .15s; }
.tool-card:hover { border-color: var(--t-ink-2); }
.tool-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-soft); }
.tool-card-icon .icon { width: 22px; height: 22px; }
.tool-card-title { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--t-ink); }
.tool-card-title .icon { width: 16px; height: 16px; color: var(--t-muted); }
.tool-card-desc { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--t-ink-2); }

.tool-cta { margin-top: 40px; padding: 22px 18px; border: 1px solid var(--t-line); border-radius: 16px; background: var(--t-soft); }
.tool-cta-kicker { font-size: 13px; font-weight: 600; color: var(--t-muted); }
.tool-cta-text { margin: 6px 0 16px; font-size: 16px; line-height: 1.7; color: var(--t-ink); }
.tool-cta-action { display: inline-grid; justify-items: center; gap: 6px; }
.tool-cta-sub { font-size: 12px; color: var(--t-muted); }
.tool-cta-openday { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--t-ink-2); }
.tool-cta-openday a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tool-cta-openday[hidden] { display: none; }
.phone-note { font-size: 15px; line-height: 1.7; color: var(--t-ink-2); }

/* ---------- 알림 ---------- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 50; max-width: calc(100% - 32px); padding: 12px 16px; border-radius: 12px; background: var(--t-ink); color: #ffffff; font-size: 14px; line-height: 1.5; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .guide-top-links { display: none; }
  .guide-top-row .btn { margin-left: auto; }
}

@media (min-width: 720px) {
  .tools-wrap { padding: 0 20px 80px; }
  .guide-top-row, .guide-foot { padding-left: 20px; padding-right: 20px; }
  .tool-head h1 { font-size: 32px; }
  .tool-lead { font-size: 17px; }
  .panel { padding: 22px; }
  .tool-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-card { grid-template-columns: 1fr; }
  .tool-cta { padding: 28px; }
  .result-value { font-size: 28px; }
}

@media (min-width: 900px) {
  .tool-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; }
  .tool-grid .is-sticky { position: sticky; top: 72px; }
}

@media print {
  .guide-top, .tool-cta, .share-box, .guide-foot, .toast { display: none; }
}