@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --black:#11110f; --ivory:#f3ebdd; --white:#fffdf7;
  --yellow:#f8d21f; --blue:#2468d8; --red:#ed563e;
  --pink:#f45d98; --green:#b7d43e; --sand:#e6b86a; --purple:#8f6fba; --orange:#f47a3d;
  --accent:var(--yellow); --accent-ink:var(--black);
}
* { box-sizing:border-box; }
.visually-hidden { width:1px; height:1px; overflow:hidden; position:absolute; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--black); background:var(--ivory); font-family:"Noto Sans KR",sans-serif; }
a { color:inherit; }
button,input,textarea,select { font:inherit; }
.site-nav { height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 4vw; border-bottom:1px solid currentColor; background:var(--ivory); position:relative; z-index:10; }
.wordmark { width:max-content; text-decoration:none; font:900 clamp(22px,2.3vw,34px)/1 "DM Sans",sans-serif; letter-spacing:-2px; }
.wordmark span { position:relative; top:-10px; margin-left:2px; font-size:9px; letter-spacing:0; }
.site-nav>p { margin:0; font-size:10px; font-weight:700; line-height:1.35; text-align:center; letter-spacing:1.5px; text-transform:uppercase; }
.nav-index { justify-self:end; text-decoration:none; font-size:13px; font-weight:700; }
.nav-index span { display:inline-grid; place-items:center; width:32px; height:32px; margin-left:10px; border:1px solid; border-radius:50%; }

/* Home */
.home-hero { min-height:calc(100vh - 86px); overflow:hidden; position:relative; padding:8vh 5vw 6vh; color:var(--black); background:var(--yellow); }
.hero-kicker { margin:0 0 7vh; font:700 11px "DM Sans"; letter-spacing:2.5px; }
.home-hero h1 { position:relative; z-index:2; margin:0; font-size:clamp(68px,11vw,165px); font-weight:900; line-height:.86; letter-spacing:-.08em; }
.home-hero h1 i { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.hero-note { position:absolute; z-index:2; right:6vw; bottom:12vh; margin:0; font-size:clamp(14px,1.4vw,19px); line-height:1.8; }
.sun-disc { width:min(36vw,530px); aspect-ratio:1; display:grid; place-items:center; position:absolute; right:13vw; top:5vh; border-radius:50%; color:var(--white); background:var(--red); transform:rotate(9deg); box-shadow:18px 24px 0 #e6b800; }
.sun-disc span { font:700 clamp(100px,18vw,260px)/1 "DM Sans"; letter-spacing:-.08em; }
.sun-disc small { position:absolute; bottom:21%; font:700 11px "DM Sans"; letter-spacing:4px; }
.scroll-cue { display:flex; gap:16px; align-items:center; position:absolute; left:5vw; bottom:5vh; text-decoration:none; font-size:12px; font-weight:700; }
.scroll-cue span { display:grid; place-items:center; width:40px; height:40px; border:1px solid; border-radius:50%; }
.collection { padding:120px 4vw 140px; background:var(--ivory); }
.section-heading { display:grid; grid-template-columns:1fr 2fr; margin-bottom:70px; }
.section-heading p { font:700 11px "DM Sans"; letter-spacing:2px; }
.section-heading h2 { margin:0; font-size:clamp(42px,6vw,82px); line-height:1.05; letter-spacing:-.07em; }
.tool-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid; border-left:1px solid; }
.collection-card { min-height:410px; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr auto; gap:20px; overflow:hidden; position:relative; padding:28px; border-right:1px solid var(--black); border-bottom:1px solid var(--black); text-decoration:none; transition:transform .25s,box-shadow .25s; }
.collection-card:hover { z-index:2; transform:translate(-7px,-7px); box-shadow:7px 7px 0 var(--black); }
.collection-card.yellow{background:var(--yellow)}.collection-card.blue{color:white;background:var(--blue)}.collection-card.red{color:white;background:var(--red)}.collection-card.sand{background:var(--sand)}.collection-card.pink{background:var(--pink)}.collection-card.green{background:var(--green)}
.card-number { font:700 12px "DM Sans"; letter-spacing:2px; }
.collection-card>div { align-self:end; grid-row:2; grid-column:1/3; }
.collection-card p { margin:0 0 8px; font-size:13px; }
.collection-card h3 { margin:0; font-size:clamp(30px,4vw,56px); line-height:1.1; letter-spacing:-.06em; }
.card-symbol { grid-column:3; grid-row:1/3; align-self:center; font:700 clamp(60px,9vw,125px)/1 "DM Sans"; letter-spacing:-.08em; transform:rotate(-8deg); opacity:.88; }
.card-arrow { grid-row:3; grid-column:3; align-self:end; font-size:12px; font-weight:700; }
.manifesto { min-height:600px; padding:120px 7vw; position:relative; color:white; background:var(--blue); }
.manifesto>p { font:700 11px "DM Sans"; letter-spacing:2px; }
.manifesto h2 { margin:12vh 0 0; font-size:clamp(42px,7vw,100px); line-height:1.05; letter-spacing:-.07em; }
.manifesto-seal { width:150px; aspect-ratio:1; display:grid; place-items:center; position:absolute; right:9vw; top:70px; border:2px solid; border-radius:50%; font:700 11px/1.5 "DM Sans"; text-align:center; letter-spacing:2px; transform:rotate(12deg); }

/* Tool pages */
.theme-yellow{--accent:var(--yellow);--accent-ink:var(--black)}.theme-blue{--accent:var(--blue);--accent-ink:white}.theme-red{--accent:var(--red);--accent-ink:white}.theme-sand{--accent:var(--sand);--accent-ink:var(--black)}.theme-pink{--accent:var(--pink);--accent-ink:var(--black)}.theme-green{--accent:var(--green);--accent-ink:var(--black)}.theme-purple{--accent:var(--purple);--accent-ink:var(--black)}.theme-orange{--accent:var(--orange);--accent-ink:var(--black)}
.tool-hero { min-height:570px; display:grid; grid-template-columns:1.2fr .8fr; overflow:hidden; color:var(--accent-ink); background:var(--accent); }
.tool-title-block { display:flex; flex-direction:column; justify-content:center; padding:70px 6vw; border-right:1px solid currentColor; }
.tool-count { margin:0 0 8vh; font:700 11px "DM Sans"; letter-spacing:2.5px; }
.tool-title-block h1 { max-width:750px; margin:0 0 30px; font-size:clamp(55px,8vw,120px); line-height:.95; letter-spacing:-.08em; }
.tool-title-block>p:last-child { max-width:530px; margin:0; font-size:16px; line-height:1.8; }
.tool-object { display:grid; place-items:center; position:relative; }
.tool-object::before,.tool-object::after { content:""; width:min(28vw,360px); aspect-ratio:1; position:absolute; border:1px solid currentColor; border-radius:50%; }
.tool-object::after { width:min(20vw,255px); transform:translate(25px,-20px); }
.tool-object span { position:relative; z-index:1; font:700 clamp(72px,12vw,180px)/1 "DM Sans"; letter-spacing:-.1em; transform:rotate(-9deg); }
.workspace { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; padding:120px 6vw 140px; background:var(--white); }
.workspace-intro>p { font:700 11px "DM Sans"; letter-spacing:2px; }
.workspace-intro h2 { margin:25px 0; font-size:clamp(34px,4vw,56px); line-height:1.18; letter-spacing:-.06em; }
.workspace-intro>span { color:#77736a; font-size:13px; line-height:1.7; }
.form-panel { max-width:760px; }
form label { display:block; margin-bottom:9px; font-size:12px; font-weight:700; letter-spacing:.03em; }
input,textarea,select { width:100%; margin-bottom:25px; border:0; border-bottom:2px solid var(--black); border-radius:0; outline:none; color:var(--black); background:transparent; font-size:clamp(20px,2.5vw,34px); font-weight:700; transition:border-color .2s; }
input,select { height:74px; padding:0 4px; }
textarea { min-height:190px; padding:18px 4px; resize:vertical; line-height:1.5; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#b7b2a8; }
select { font-size:22px; cursor:pointer; }
.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.field-grid label:last-child { grid-column:1/-1; }
.field-grid input { font-size:23px; }
.field-help { margin:-13px 0 28px; color:#7a766d; font-size:12px; }
form button { width:100%; min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border:1px solid var(--black); color:var(--black); background:var(--accent); font-weight:900; cursor:pointer; box-shadow:6px 6px 0 var(--black); transition:.2s; }
form button:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--black); }
form button:disabled { opacity:.65; cursor:wait; }
form button span { font-size:25px; }
.result { margin-top:42px; padding:30px; border:1px solid var(--black); border-left:12px solid var(--accent); background:var(--ivory); white-space:pre-wrap; line-height:1.8; overflow-wrap:anywhere; }
.result.error { border-left-color:var(--red); color:#9c281c; background:#fff1ee; }
.result>span { display:block; color:#716d64; font-size:11px; font-weight:700; letter-spacing:.08em; }
.result>strong { display:block; margin:2px 0 15px; font-size:clamp(24px,3vw,38px); line-height:1.4; }
.result>small { display:block; color:#4f4b44; font-size:12px; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:25px; white-space:normal; }
.result-grid span { display:block; color:#777168; font-size:11px; }
.result-grid strong { font-size:24px; }
.copy-button { float:right; padding:7px 12px; border:1px solid; background:white; cursor:pointer; font-size:11px; }
.next-tool { min-height:250px; display:grid; grid-template-columns:1fr 2fr auto; align-items:center; padding:50px 6vw; color:white; background:var(--black); text-decoration:none; }
.next-tool span { font:700 11px "DM Sans"; letter-spacing:2px; }
.next-tool strong { font-size:clamp(34px,5vw,70px); letter-spacing:-.06em; }
.next-tool i { font:400 60px "DM Sans"; transition:transform .2s; }
.next-tool:hover i { transform:translateX(12px); }
.site-footer { min-height:130px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:35px 4vw; border-top:1px solid; background:var(--ivory); }
.site-footer p { margin:0; font-size:10px; font-weight:700; letter-spacing:1px; text-align:center; }
.site-footer p:last-child { text-align:right; }

@media (max-width:800px) {
  .site-nav { grid-template-columns:1fr auto; }.site-nav>p{display:none}
  .home-hero { min-height:690px; padding-top:70px; }.hero-kicker{margin-bottom:55px}.sun-disc{width:340px;right:-130px;top:180px}.hero-note{right:auto;left:5vw;bottom:100px}.scroll-cue{bottom:28px}
  .section-heading { grid-template-columns:1fr; gap:25px; }.tool-list{grid-template-columns:1fr}.collection-card{min-height:330px}
  .tool-hero { min-height:650px; grid-template-columns:1fr; }.tool-title-block{border:0;border-bottom:1px solid;padding:70px 6vw}.tool-count{margin-bottom:55px}.tool-object{min-height:230px}.tool-object::before{width:190px}.tool-object::after{width:130px}
  .workspace { grid-template-columns:1fr; gap:70px; padding-top:85px; }.next-tool{grid-template-columns:1fr auto}.next-tool strong{grid-row:2;grid-column:1}.next-tool i{grid-row:1/3;grid-column:2}
}
@media (max-width:520px) {
  .site-nav { height:72px; padding-inline:20px; }.nav-index{font-size:11px}.nav-index span{width:27px;height:27px}
  .home-hero { min-height:630px; padding-inline:22px; }.home-hero h1{font-size:62px}.sun-disc{width:290px;right:-140px;top:210px}.hero-note,.scroll-cue{left:22px}
  .collection { padding:80px 16px 100px }.collection-card{min-height:290px;padding:22px}.card-symbol{font-size:65px}.collection-card h3{font-size:35px}
  .manifesto{min-height:540px;padding:80px 22px}.manifesto-seal{width:110px;right:22px;top:45px}.manifesto h2{margin-top:180px}
  .tool-title-block{padding:55px 22px}.tool-title-block h1{font-size:53px}.workspace{padding:75px 22px 100px}.field-grid{grid-template-columns:1fr;gap:0}.field-grid label:last-child{grid-column:auto}
  input,textarea,select{font-size:21px}.next-tool{padding:35px 22px}.site-footer{grid-template-columns:1fr 1fr}.site-footer p:first-of-type{display:none}
}

/* Compact, tool-first layout */
.privacy-dot { justify-self:end; font-size:11px; font-weight:700; }
.privacy-dot i { width:7px; height:7px; display:inline-block; margin-right:7px; border-radius:50%; background:var(--green); }
.tool-nav { display:flex; overflow-x:auto; position:sticky; z-index:9; top:0; padding:0 4vw; border-bottom:1px solid var(--black); background:var(--ivory); scrollbar-width:none; }
.tool-nav::-webkit-scrollbar { display:none; }
.tool-nav a { flex:1 0 auto; display:flex; align-items:center; justify-content:center; min-height:54px; padding:0 20px; border-right:1px solid #cbc5b9; text-decoration:none; font-size:11px; font-weight:700; white-space:nowrap; }
.tool-nav a:first-child { border-left:1px solid #cbc5b9; }
.tool-nav a.active { color:var(--accent-ink); background:var(--accent); }
.compact-tool { min-height:100vh; display:flex; flex-direction:column; }
.compact-tool .site-footer { margin-top:auto; }
.tool-main { flex:1; background:var(--white); }
.compact-hero { min-height:220px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; padding:42px 7vw; color:var(--accent-ink); background:var(--accent); }
.compact-hero p { margin:0 0 22px; font:700 10px "DM Sans"; letter-spacing:2.4px; }
.compact-hero h1 { margin:0; font-size:clamp(48px,7vw,92px); line-height:.95; letter-spacing:-.075em; }
.compact-symbol { min-width:190px; text-align:center; font:700 clamp(68px,10vw,135px)/1 "DM Sans"; letter-spacing:-.08em; transform:rotate(-8deg); }
.compact-workspace { min-height:460px; display:grid; place-items:start center; padding:50px 24px 90px; border-top:8px solid var(--accent); }
.compact-workspace .form-panel { width:min(100%,760px); max-width:none; }
.compact-workspace form>label:first-child { margin-bottom:13px; font-size:14px; }
.compact-workspace input,.compact-workspace select { height:70px; margin-bottom:20px; }
.compact-workspace textarea { margin-bottom:22px; }
.example-line { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 30px; }
.example-line button { width:auto; min-height:0; padding:7px 12px; border:1px solid #aaa398; border-radius:999px; color:#68635a; background:transparent; box-shadow:none; font:500 11px "DM Sans"; }
.example-line button:hover { color:var(--black); background:var(--ivory); box-shadow:none; transform:none; }
.compact-workspace .submit-button { margin-top:8px; }
.compact-workspace .result { margin-top:34px; }
.count-grid { grid-template-columns:repeat(5,1fr); }

@media (max-width:800px) {
  .privacy-dot { display:none; }
  .tool-nav { padding:0; }
  .tool-nav a { min-height:50px; padding-inline:17px; }
  .compact-hero { min-height:190px; padding:36px 24px; }
  .compact-symbol { min-width:120px; }
  .compact-workspace { min-height:430px; padding:38px 24px 75px; }
}
@media (max-width:520px) {
  .tool-nav { position:sticky; top:0; }
  .tool-nav a { justify-content:flex-start; min-height:46px; padding:0 15px; font-size:10px; }
  .compact-hero { min-height:155px; padding:26px 20px; }
  .compact-hero p { margin-bottom:13px; font-size:9px; }
  .compact-hero h1 { font-size:43px; }
  .compact-symbol { min-width:82px; font-size:58px; }
  .compact-workspace { min-height:calc(100vh - 248px); display:block; padding:28px 20px 55px; border-top-width:6px; }
  .compact-workspace form>label:first-child { font-size:13px; }
  .compact-workspace input,.compact-workspace select { height:62px; margin-bottom:17px; font-size:23px; }
  .compact-workspace textarea { min-height:170px; font-size:18px; }
  .example-line { margin-bottom:25px; flex-wrap:nowrap; overflow-x:auto; }
  .example-line button { flex:0 0 auto; }
  .compact-workspace .submit-button { min-height:60px; }
  .compact-workspace .result { margin-top:28px; padding:23px 18px; }
  .compact-workspace .result>strong { font-size:25px; }
  .count-grid { grid-template-columns:repeat(2,1fr); }
}

/* 모든 화면에서 비율이 흐트러지지 않는 모바일 중심 앱 셸 */
html {
  background-color:#e5e2e7;
  background-image:conic-gradient(
    #ddd7e3 25%,
    #ebe9ec 0 50%,
    #ddd7e3 0 75%,
    #ebe9ec 0
  );
  background-size:48px 48px;
  background-attachment:fixed;
}
.compact-tool {
  width:min(100%,600px);
  min-height:100vh;
  margin:0 auto;
  background:var(--white);
  box-shadow:0 0 0 1px #11110f24,0 22px 70px #40295a33;
}
.compact-tool .tool-nav {
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid #c8bfb2;
  background:#f3ebddf2;
  scroll-snap-type:x proximity;
}
.compact-tool .tool-nav a,
.compact-tool .tool-nav a:first-child {
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  border:1px solid #bdb3a6;
  border-radius:999px;
  background:var(--white);
  font-size:11px;
  line-height:1;
  letter-spacing:-.02em;
  scroll-snap-align:start;
}
.compact-tool .tool-nav a.active {
  border-color:var(--black);
  background:var(--accent);
  box-shadow:3px 3px 0 var(--black);
  transform:translate(-1px,-1px);
}
.compact-tool .compact-workspace {
  min-height:calc(100vh - 150px);
  display:block;
  padding:32px 28px 64px;
  border-top:5px solid var(--accent);
}
.compact-tool .compact-workspace .form-panel { width:100%; }
.compact-tool form label,
.compact-tool .compact-workspace form>label:first-child {
  margin-bottom:7px;
  color:#37332e;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0;
}
.compact-tool .compact-workspace input,
.compact-tool .compact-workspace select {
  height:58px;
  margin-bottom:22px;
  padding-inline:2px;
  font-size:22px;
  line-height:1.2;
}
.compact-tool .compact-workspace input { font-size:24px; }
.compact-tool .compact-workspace textarea {
  min-height:170px;
  margin-bottom:22px;
  font-size:18px;
}
.compact-tool .field-grid { grid-template-columns:1fr; gap:0; }
.compact-tool .field-grid label:last-child { grid-column:auto; }
.compact-tool .field-grid input { font-size:21px; }
.compact-tool .field-help {
  margin:-10px 0 24px;
  font-size:11px;
  line-height:1.55;
}
.compact-tool .example-line {
  gap:7px;
  margin:-4px 0 24px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.compact-tool .example-line::-webkit-scrollbar { display:none; }
.compact-tool .example-line button {
  flex:0 0 auto;
  min-height:34px;
  padding:0 12px;
  font-size:11px;
}
.compact-tool form .submit-button {
  min-height:58px;
  margin-top:6px;
  padding:0 20px;
  font-size:15px;
  line-height:1;
  box-shadow:5px 5px 0 var(--black);
}
.compact-tool form .submit-button span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
}
.compact-tool .compact-workspace .result {
  margin-top:26px;
  padding:20px 18px;
  border-left-width:8px;
  line-height:1.55;
}
.compact-tool .compact-workspace .result>span { font-size:10px; line-height:1.5; }
.compact-tool .compact-workspace .result>strong {
  margin:5px 0 10px;
  font-size:27px;
  line-height:1.25;
}
.compact-tool .compact-workspace .result>small { font-size:11px; line-height:1.5; }
.compact-tool .result-grid { gap:18px 14px; }
.compact-tool .result-grid strong { font-size:21px; }
.compact-tool .count-grid { grid-template-columns:repeat(2,1fr); }
.compact-tool .site-footer {
  min-height:92px;
  grid-template-columns:1fr auto;
  padding:24px 28px;
}
.compact-tool .site-footer .wordmark {
  font-size:24px;
  letter-spacing:-1.5px;
}
.compact-tool .site-footer .wordmark span { top:-7px; font-size:7px; }
.compact-tool .site-footer p:first-of-type { display:none; }
.compact-tool .site-footer p:last-child { font-size:9px; letter-spacing:1.2px; }

@media (max-width:640px) {
  html { background:var(--ivory); }
  .compact-tool { width:100%; box-shadow:none; }
}
@media (max-width:380px) {
  .compact-tool .compact-workspace { padding-inline:20px; }
  .compact-tool .tool-nav { padding-inline:9px; }
  .compact-tool .tool-nav a { padding-inline:12px; font-size:10px; }
  .compact-tool .compact-workspace input { font-size:22px; }
}

/* 넓은 화면: 전체 폭 상단 메뉴 / 모바일: 상단 스와이프 탭 */
@media (min-width:760px) {
  .compact-tool {
    width:min(calc(100% - 56px),1180px);
    min-height:calc(100vh - 56px);
    margin:28px auto;
    display:flex;
    overflow:clip;
  }
  .compact-tool .tool-nav {
    position:sticky;
    top:0;
    flex-direction:row;
    gap:0;
    overflow-x:auto;
    padding:0;
    border-bottom:1px solid var(--black);
    background:var(--ivory);
  }
  .compact-tool .tool-nav::before,
  .compact-tool .tool-nav::after { content:none; }
  .compact-tool .tool-nav a,
  .compact-tool .tool-nav a:first-child {
    width:auto;
    min-width:0;
    min-height:66px;
    flex:1 0 140px;
    justify-content:center;
    padding:0 13px;
    border:0;
    border-right:1px solid #c7bfb2;
    border-radius:0;
    background:transparent;
    font-size:11px;
    text-align:center;
  }
  .compact-tool .tool-nav a:first-child { border-left:1px solid #c7bfb2; }
  .compact-tool .tool-nav a:hover {
    background:var(--white);
  }
  .compact-tool .tool-nav a.active {
    background:var(--accent);
    box-shadow:inset 0 -5px 0 var(--black);
    transform:none;
  }
  .compact-tool .compact-workspace {
    min-height:calc(100vh - 214px);
    display:grid;
    place-items:start center;
    padding:60px 72px 78px;
    border-top-width:7px;
  }
  .compact-tool .compact-workspace .form-panel {
    width:min(100%,700px);
  }
}

@media (max-width:759px) {
  html { background:var(--ivory); }
  .compact-tool {
    width:100%;
    margin:0;
    box-shadow:none;
  }
  .compact-tool .tool-nav {
    overscroll-behavior-inline:contain;
  }
}

/* 앱형 하단 메뉴: 화면 크기와 관계없이 모바일 폭 안에서 4 + 4 두 줄 */
.compact-tool {
  width:min(100%,600px);
  min-height:100vh;
  margin:0 auto;
  display:flex;
  overflow:visible;
  padding-bottom:132px;
}
@media (min-width:760px) {
  .compact-tool .compact-workspace {
    min-height:calc(100vh - 224px);
    display:block;
    padding:42px 36px 66px;
    border-top-width:6px;
  }
  .compact-tool .compact-workspace .form-panel { width:100%; }
}

.compact-tool .tool-nav {
  width:min(calc(100% - 16px),568px);
  height:auto;
  max-height:none;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:6px;
  position:fixed;
  z-index:30;
  inset:auto auto max(10px,env(safe-area-inset-bottom)) 50%;
  transform:translateX(-50%);
  overflow:visible;
  padding:8px;
  border:1px solid var(--black);
  border-radius:16px;
  background:#f3ebddf2;
  box-shadow:0 14px 34px #34284238;
  backdrop-filter:blur(14px);
}
.compact-tool .tool-nav::before,
.compact-tool .tool-nav::after { content:none; }
.compact-tool .tool-nav a,
.compact-tool .tool-nav a:first-child {
  width:auto;
  min-width:0;
  min-height:47px;
  grid-column:span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 5px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  box-shadow:none;
  font-size:10px;
  line-height:1.25;
  text-align:center;
  white-space:normal;
  transform:none;
}
.compact-tool .tool-nav a:nth-child(5) { grid-column:span 2; }
.compact-tool .tool-nav a:hover { border-color:#c7bfb2; background:var(--white); }
.compact-tool .tool-nav a.active {
  border-color:var(--black);
  background:var(--accent);
  box-shadow:2px 2px 0 var(--black);
  transform:translate(-1px,-1px);
}

@media (max-width:380px) {
  .compact-tool .tool-nav { width:calc(100% - 12px); gap:4px; padding:6px; }
  .compact-tool .tool-nav a,
  .compact-tool .tool-nav a:first-child { min-height:45px; padding-inline:3px; font-size:9px; }
}

.info-panel>p {
  margin:0 0 22px;
  font:700 10px/1 "DM Sans",sans-serif;
  letter-spacing:2px;
}
.info-panel h1 {
  margin:0 0 46px;
  font-size:46px;
  line-height:1.05;
  letter-spacing:-.07em;
}
.info-panel dl { margin:0; border-top:1px solid var(--black); }
.info-panel dl>div {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid #c9c1b5;
}
.info-panel dt { font-size:11px; font-weight:900; }
.info-panel dd { margin:0; color:#615c54; font-size:12px; line-height:1.65; }

.ai-study { margin-top:64px; padding-top:50px; border-top:1px solid var(--black); }
.ai-model-status { display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:13px 15px; border:1px solid var(--black); background:#f4e8f5; }
.ai-model-status i { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:#8b78a9; box-shadow:0 0 0 5px #8b78a922; }
.ai-model-status span,.ai-model-status strong,.ai-model-status small { display:block; }
.ai-model-status strong { font-size:12px; }
.ai-model-status small { margin-top:2px; color:#6e6670; font-size:9px; }
.ai-model-status[data-state="ready"] { background:#e8f0df; }
.ai-model-status[data-state="ready"] i { background:#77a55d; box-shadow:0 0 0 5px #77a55d22; }
.ai-model-status[data-state="error"] { background:#fff1ee; }
.ai-model-status[data-state="error"] i { background:var(--red); box-shadow:0 0 0 5px #d7504222; }
.ai-study header>p,.ai-section-label { margin:0 0 16px; font:900 9px/1 "DM Sans",sans-serif; letter-spacing:2px; }
.ai-study header h2 { margin:0 0 18px; font-size:38px; line-height:1.08; letter-spacing:-.065em; }
.ai-study header>span { display:block; max-width:560px; color:#625c54; font-size:12px; line-height:1.75; }
.ai-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:34px 0 56px; border-top:1px solid var(--black); border-left:1px solid var(--black); }
.ai-stat-grid article { min-width:0; padding:19px 13px; border-right:1px solid var(--black); border-bottom:1px solid var(--black); background:#f45d9824; }
.ai-stat-grid strong,.ai-stat-grid span { display:block; }
.ai-stat-grid strong { margin-bottom:6px; font:900 20px/1 "DM Sans",sans-serif; letter-spacing:-.05em; }
.ai-stat-grid span { color:#635d55; font-size:9px; }
.ai-study-block { margin-top:48px; }
.ai-study-block h3 { margin:0 0 14px; font-size:24px; letter-spacing:-.045em; }
.ai-study-block>p:not(.ai-section-label,.ai-caption) { margin:0; color:#554f48; font-size:12px; line-height:1.75; }
.ai-data-list { display:grid; grid-template-columns:repeat(5,1fr); margin:24px 0 16px; border-top:1px solid #aca49a; border-bottom:1px solid #aca49a; }
.ai-data-list>div { padding:14px 8px; border-right:1px solid #d1c9be; text-align:center; }
.ai-data-list>div:last-child { border-right:0; }
.ai-data-list dt { margin-bottom:5px; color:#736c63; font-size:9px; }
.ai-data-list dd { margin:0; font:900 13px "DM Sans",sans-serif; }
.ai-caption { margin:14px 0 0; color:#756e65; font-size:10px; line-height:1.7; }
.ai-process { margin:22px 0 0; padding:0; border-top:1px solid var(--black); list-style:none; }
.ai-process li { display:grid; grid-template-columns:42px 1fr; gap:10px; padding:16px 0; border-bottom:1px solid #cfc7bc; }
.ai-process li>b { font:700 10px "DM Sans",sans-serif; }
.ai-process li span { color:#665f57; font-size:11px; line-height:1.6; }
.ai-process li strong { display:block; margin-bottom:2px; color:var(--black); font-size:12px; }
.ai-result-card { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--black); }
.ai-result-card>div { min-width:0; padding:20px; background:var(--ivory); }
.ai-result-card>div+div { border-left:1px solid var(--black); background:#f45d9824; }
.ai-result-latest { grid-template-columns:1fr; }
.ai-result-latest>div { background:#f45d9824; }
.ai-result-card span,.ai-result-card strong,.ai-result-card small { display:block; }
.ai-result-card span { font-size:10px; font-weight:700; }
.ai-result-card strong { margin:12px 0 8px; font:900 29px/1 "DM Sans",sans-serif; }
.ai-result-card strong.pending { font-family:"Noto Sans KR",sans-serif; font-size:21px; letter-spacing:-.04em; }
.ai-result-card small { color:#736c63; font-size:9px; line-height:1.5; }
.ai-eval-breakdown { margin-top:16px; margin-bottom:16px; }
.ai-example-table-wrap { margin-top:20px; overflow:hidden; border:1px solid var(--black); background:var(--ivory); }
.ai-example-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.ai-example-table th,.ai-example-table td { padding:9px 11px; border-bottom:1px solid #d1c9be; text-align:left; vertical-align:top; font-size:9px; line-height:1.45; overflow-wrap:anywhere; }
.ai-example-table th { background:#f45d9824; font-weight:900; }
.ai-example-table th:first-child,.ai-example-table td:first-child { width:48%; border-right:1px solid #d1c9be; }
.ai-example-table tbody tr:last-child td { border-bottom:0; }
.ai-example-table code { color:#5e3150; font:700 8px/1.4 "DM Sans",monospace; }
.ai-limitations { padding:24px; border:1px solid var(--black); background:#ece7f2; }
.ai-caveats { margin:20px 0 0; padding:0; border-top:1px solid var(--black); list-style:none; }
.ai-caveats li { display:grid; grid-template-columns:32px 1fr; gap:10px; padding:13px 0; border-bottom:1px solid #c9c1ce; }
.ai-caveats li>b { font:700 9px "DM Sans",sans-serif; }
.ai-caveats li span { color:#625a66; font-size:10px; line-height:1.65; }
.ai-caveats li strong { display:block; margin-bottom:2px; color:var(--black); font-size:11px; }
.ai-local-note { padding:24px; border:1px solid var(--black); background:var(--accent); box-shadow:5px 5px 0 var(--black); }
.ai-local-note h3 { font-size:22px; }
.ai-local-note>p:not(.ai-section-label) { color:#2e2925; }

@media (max-width:520px) {
  .ai-study { margin-top:52px; padding-top:38px; }
  .ai-study header h2 { font-size:32px; }
  .ai-stat-grid { grid-template-columns:repeat(2,1fr); margin-bottom:46px; }
  .ai-stat-grid article { padding:17px 14px; }
  .ai-data-list { grid-template-columns:repeat(2,1fr); border-bottom:0; }
  .ai-data-list>div { border-bottom:1px solid #aca49a; }
  .ai-data-list>div:nth-child(2n) { border-right:0; }
  .ai-data-list>div:last-child { grid-column:1/-1; }
  .ai-result-card { grid-template-columns:1fr; }
  .ai-result-card>div+div { border-top:1px solid var(--black); border-left:0; }
  .ai-example-table th,.ai-example-table td { padding:8px 7px; font-size:8px; }
  .ai-example-table code { font-size:7px; }
  .ai-limitations { padding:20px 16px; }
}

/* 모바일에서는 이전 방식의 상단 스와이프 메뉴 사용 */
@media (max-width:759px) {
  .compact-tool { padding-bottom:0; }
  .compact-tool .tool-nav {
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    gap:8px;
    position:sticky;
    inset:0 auto auto 0;
    transform:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid #c8bfb2;
    border-radius:0;
    background:#f3ebddf2;
    box-shadow:none;
    backdrop-filter:blur(14px);
    scrollbar-width:none;
  }
  .compact-tool .tool-nav::-webkit-scrollbar { display:none; }
  .compact-tool .tool-nav a,
  .compact-tool .tool-nav a:first-child,
  .compact-tool .tool-nav a:nth-child(5) {
    width:auto;
    min-width:max-content;
    min-height:38px;
    flex:0 0 auto;
    grid-column:auto;
    padding:0 14px;
    border:1px solid #bdb3a6;
    border-radius:999px;
    background:var(--white);
    font-size:11px;
    line-height:1;
    white-space:nowrap;
  }
  .compact-tool .tool-nav a.active {
    border-color:var(--black);
    background:var(--accent);
    box-shadow:3px 3px 0 var(--black);
    transform:translate(-1px,-1px);
  }
}

@media (max-width:380px) {
  .compact-tool .tool-nav { width:100%; gap:7px; padding:9px; }
  .compact-tool .tool-nav a,
  .compact-tool .tool-nav a:first-child,
  .compact-tool .tool-nav a:nth-child(5) {
    min-height:36px;
    padding-inline:12px;
    font-size:10px;
  }
}

/* Search-friendly guides: useful page content remains visible without interrupting the tool. */
.seo-guide {
  padding:58px 32px 150px;
  border-top:1px solid var(--black);
  background:var(--ivory);
}
.compact-tool .compact-workspace { min-height:430px; }
.tool-page-title {
  margin:0 0 28px;
  font-size:clamp(27px,6vw,38px);
  line-height:1.15;
  letter-spacing:-.055em;
}
.seo-guide .seo-kicker {
  margin:0 0 18px;
  font:900 9px/1 "DM Sans",sans-serif;
  letter-spacing:2px;
}
.seo-guide h2 {
  margin:0;
  font-size:clamp(29px,6vw,42px);
  line-height:1.18;
  letter-spacing:-.055em;
}
.seo-guide .seo-intro {
  margin:22px 0 0;
  color:#514c45;
  font-size:13px;
  line-height:1.85;
}
.seo-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:34px 0 48px;
  border-top:1px solid var(--black);
  border-left:1px solid var(--black);
}
.seo-facts>div {
  min-width:0;
  padding:18px 12px;
  border-right:1px solid var(--black);
  border-bottom:1px solid var(--black);
  background:var(--white);
}
.seo-facts dt { color:#756e64; font-size:9px; font-weight:700; }
.seo-facts dd { margin:7px 0 0; font-size:13px; font-weight:900; overflow-wrap:anywhere; }
.seo-guide h3 { margin:42px 0 16px; font-size:20px; letter-spacing:-.04em; }
.seo-guide ol { margin:0; padding-left:23px; }
.seo-guide ol li { padding:5px 0 5px 4px; color:#514c45; font-size:12px; line-height:1.7; }
.seo-faq { border-top:1px solid var(--black); }
.seo-faq details { border-bottom:1px solid #c6beb2; }
.seo-faq summary { padding:17px 2px; font-size:12px; font-weight:900; cursor:pointer; }
.seo-faq details p { margin:-3px 0 18px; color:#5e5850; font-size:12px; line-height:1.75; }

@media (max-width:520px) {
  .compact-tool .compact-workspace { min-height:0; }
  .seo-guide { padding:45px 20px 80px; }
  .seo-facts { grid-template-columns:1fr; }
  .seo-facts>div { display:grid; grid-template-columns:90px 1fr; align-items:center; }
  .seo-facts dd { margin:0; }
}