/* ==========================================================================
   이소 — 도구 페이지 공통 셸 (세로형 / 인스타그램 유입 전용)
   base.css 다음에 불러옵니다.

   전제
   - 방문자는 인스타그램 프로필 링크를 통해 휴대폰 세로 화면으로 들어옵니다.
   - 페이지 사이를 오가지 않습니다. 상단 내비게이션이 없습니다.
   - 한 화면 폭(--col)을 넘지 않는 한 줄짜리 세로 흐름으로만 읽힙니다.
   ========================================================================== */

.tool-page{
  max-width:var(--col);
  margin:0 auto;
  padding:0 22px;
}

/* ---------- 상단 (첫 화면) ---------- */
.tool-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* 인스타그램에서 들어온 사람이 곧바로 제목과 파일 넣는 자리를 보게 합니다.
     화면을 꽉 채우는 대신 위아래 여백만 넉넉히 둡니다. */
  padding:clamp(56px,9vh,96px) 0 clamp(48px,7vh,76px);
  background:
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(232,163,61,0.10), transparent 62%),
    var(--navy);
}
.tool-brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-dim);
  font-weight:600;
  margin-bottom:30px;
}

.tool-title{
  font-family:var(--serif);
  font-size:clamp(34px,9.5vw,46px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:0.01em;
  color:var(--cream);
}
.tool-sub{
  margin-top:20px;
  font-size:15px;
  line-height:1.9;
  font-weight:300;
  color:var(--cream-dim);
  max-width:380px;
}
.tool-meta{
  margin-top:30px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.tool-meta span{
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--cream-faint);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px;
}

/* ---------- 섹션 ---------- */
.tool-section{
  padding:66px 0;
  border-top:1px solid var(--line);
}
.tool-section:first-of-type{border-top:0;}
.tool-section > .eyebrow{margin-bottom:16px;}
.tool-section h2{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  color:var(--cream);
  line-height:1.5;
  margin-bottom:12px;
}
.tool-section p{
  font-size:14.5px;
  line-height:1.95;
  color:var(--cream-dim);
  font-weight:300;
  margin-bottom:13px;
}
.tool-section p b,.tool-section p strong{color:var(--cream);font-weight:600;}
.tool-section p:last-child{margin-bottom:0;}

/* ---------- 파일 넣는 자리 ---------- */
.drop{
  margin-top:26px;
  border:1px dashed var(--line-strong);
  border-radius:18px;
  padding:38px 22px;
  text-align:center;
  cursor:pointer;
  background:rgba(246,242,232,0.02);
  transition:border-color .25s ease, background .25s ease;
}
.drop:hover,.drop.over{
  border-color:var(--gold);
  background:rgba(232,163,61,0.07);
}
.drop .drop-title{font-size:15px;color:var(--cream);font-weight:500;}
.drop .drop-hint{font-size:13px;color:var(--cream-faint);margin-top:9px;line-height:1.7;font-weight:300;}
.drop input[type=file]{display:none;}

.status{
  margin-top:16px;
  min-height:22px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--gold);
  text-align:center;
}
.status.err{color:#e8776d;}

/* ---------- 결과 카드 ---------- */
.stage{
  margin-top:8px;
  background:var(--navy-2);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
}
.stage canvas{width:100%;height:auto;}
.stage .stage-cap{
  padding:20px 22px 24px;
  font-size:14px;
  line-height:1.85;
  color:var(--cream-dim);
  font-weight:300;
  text-align:center;
}
.stage .stage-cap b{color:var(--cream);font-weight:600;}

/* 결과 영역 전체 */
.result{display:none;}
.result.on{display:block;}

.actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:26px;
}
.actions .btn{width:100%;}

.privacy-note{
  margin-top:22px;
  font-size:12.5px;
  line-height:1.85;
  color:var(--cream-faint);
  font-weight:300;
}

/* 접었다 펴는 안내 */
.faq{margin-top:8px;}
.faq details{
  border-top:1px solid var(--line);
  padding:16px 0;
}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;
  list-style:none;
  font-size:14.5px;
  color:var(--cream);
  font-weight:500;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);font-size:17px;line-height:1;flex-shrink:0;}
.faq details[open] summary::after{content:"–";}
.faq details p{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.9;
  color:var(--cream-dim);
  font-weight:300;
}