/* ==========================================================
   소공인 사장님 AI 따라하기 · 1회차 — 라이트 문서형
   시니어 접근성: 본문 ≥18px, 버튼 높이 ≥56px, 핀치줌 허용
   ========================================================== */
:root{
  --navy:#0b2447;
  --navy-2:#14315e;
  --blue:#1e63c8;
  --blue-bright:#4d9fff;
  --blue-soft:#e8f1ff;
  --white:#ffffff;
  --gray-50:#f6f8fb;
  --gray-100:#eef2f7;
  --gray-200:#dde4ee;
  --gray-300:#c3cdda;
  --gray-500:#5f6f84;
  --gray-700:#3b4757;
  --ink:#16202e;

  --green:#177245;
  --green-soft:#e3f4ea;
  --orange:#9a5b00;
  --orange-soft:#fff0d9;
  --yellow-soft:#fff3c4;
  --yellow-ink:#6b4e00;

  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(11,36,71,.08);
  --shadow:0 8px 28px rgba(11,36,71,.10);
  --shadow-lg:0 20px 50px rgba(11,36,71,.16);

  --maxw:1140px;
  --narrow:760px;
  --font:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:1.125rem;            /* 본문 18px */
  color:var(--ink);
  background:var(--white);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.container.narrow{max-width:var(--narrow)}

:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px;border-radius:4px}

/* ===== 헤더 ===== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-200);
  transition:box-shadow .3s;
}
.header.scrolled{box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--navy);flex-shrink:0;padding:8px 0}
.brand__bar{width:4px;height:20px;border-radius:2px;background:linear-gradient(var(--blue-bright),var(--blue))}
.brand__text{font-size:1.05rem}
.brand__text strong{font-weight:900}

.chips{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:8px 0}
.chips::-webkit-scrollbar{display:none}
.chips a{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  min-height:44px;padding:8px 14px;
  font-size:.95rem;font-weight:700;color:var(--gray-700);
  background:var(--gray-100);border-radius:999px;
  transition:color .2s,background .2s;
}
.chips a:hover{color:var(--blue);background:var(--blue-soft)}

/* ===== 공통 섹션 ===== */
.section{padding:clamp(56px,9vw,96px) 0}
.section--alt{background:var(--gray-50)}
.section__title{font-size:clamp(1.7rem,5vw,2.2rem);font-weight:900;color:var(--navy);line-height:1.35;margin-bottom:14px}
.section__lead{color:var(--gray-700);margin-bottom:36px}
.section__lead strong{color:var(--navy);font-weight:800}
.sub-title{font-size:1.3rem;font-weight:800;color:var(--navy);margin:44px 0 14px}
.plain{color:var(--gray-700);margin-bottom:14px}
.plain--sm{font-size:1rem}

.step__kicker{
  display:flex;align-items:center;gap:10px;
  font-size:1rem;font-weight:700;color:var(--blue);margin-bottom:12px;
}
.step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--blue);color:var(--white);
  font-size:1.35rem;font-weight:900;
}

/* ===== 히어로 ===== */
.hero{
  background:linear-gradient(180deg,var(--blue-soft) 0%,var(--white) 100%);
  padding:clamp(56px,10vw,104px) 0 clamp(44px,7vw,72px);
}
.hero__inner{max-width:var(--narrow);text-align:center}
.hero__badge{
  display:inline-block;
  font-size:.95rem;font-weight:700;color:var(--blue);
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:999px;padding:8px 18px;margin-bottom:22px;
  box-shadow:var(--shadow-sm);
}
.hero__title{
  font-size:clamp(1.9rem,6.5vw,3rem);
  font-weight:900;color:var(--navy);line-height:1.32;margin-bottom:18px;
}
.hero__sub{color:var(--gray-700);margin-bottom:30px}
.hero__sub strong{color:var(--navy);font-weight:800}
.hero__note{margin-top:18px;font-size:.95rem;color:var(--gray-500)}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:14px 26px;
  font-size:1.06rem;font-weight:800;
  border-radius:var(--radius);border:none;cursor:pointer;
  transition:background .2s,transform .1s,border-color .2s;
  text-align:center;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--navy)}
.btn--ghost{
  background:var(--white);color:var(--blue);
  border:2px solid var(--gray-300);
}
.btn--ghost:hover{border-color:var(--blue);background:var(--blue-soft)}
.btn--big{width:100%;max-width:420px;font-size:1.15rem}
.btn--copied{background:var(--green)!important;color:var(--white)!important}
.btn--gpt.btn--nudge{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

.btn-row{display:flex;justify-content:center;margin-top:28px}
.btn-steps{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.btn-steps .btn{width:100%}
.btn-caption{margin-top:10px;font-size:.98rem;color:var(--gray-500)}
@media(min-width:640px){
  .btn-steps{flex-direction:row}
  .btn-steps .btn{width:auto;flex:1;max-width:320px}
}

/* ===== 목차(오늘 배운 것) ===== */
.toc{list-style:none;display:flex;flex-direction:column;gap:12px}
.toc a{
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:18px 20px;
  transition:border-color .2s,box-shadow .2s;
}
.toc a:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.toc__num{
  flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--blue-soft);color:var(--blue);
  font-size:1.4rem;font-weight:900;
}
.toc__body{display:flex;flex-direction:column}
.toc__body strong{font-size:1.15rem;font-weight:800;color:var(--navy)}
.toc__body span{font-size:1rem;color:var(--gray-500)}

/* ===== 비교표 ===== */
.table-wrap{overflow-x:auto;margin-bottom:8px}
.cmp{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.cmp th,.cmp td{padding:14px 16px;text-align:left;font-size:1.02rem;border-bottom:1px solid var(--gray-100);vertical-align:top}
.cmp thead th{background:var(--navy);color:var(--white);font-weight:700;border-bottom:none}
.cmp tbody th{font-weight:800;color:var(--navy);white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp__url{font-size:.9rem;font-weight:500;color:var(--blue)}
.cmp td strong{color:var(--blue);font-weight:800}

/* ===== 가입 순서 ===== */
.steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:14px;margin-top:6px}
.steps li{
  counter-increment:step;
  position:relative;
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius);
  padding:16px 20px 16px 64px;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:16px;top:16px;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:var(--white);
  font-weight:900;font-size:1.05rem;
}
.steps strong{color:var(--navy);font-weight:800}

/* ===== 안내 박스 ===== */
.note-box{
  background:var(--blue-soft);border:1.5px solid #cadeff;
  border-radius:var(--radius-lg);padding:20px 22px;margin-top:28px;
}
.note-box__title{font-weight:900;color:var(--navy);margin-bottom:6px}
.note-box--warn{background:var(--yellow-soft);border-color:#f0dfa0;margin:0 0 28px}
.note-box--warn .note-box__title{color:var(--yellow-ink)}

/* ===== STEP2 재료 카드 ===== */
.ing{list-style:none;display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.ing{grid-template-columns:1fr 1fr}}
.ing__card{
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:22px;
}
.ing__name{font-size:1.25rem;font-weight:900;color:var(--navy);margin-bottom:6px}
.ing__en{font-size:.9rem;font-weight:600;color:var(--gray-500);margin-left:4px}
.ing__desc{color:var(--gray-700);margin-bottom:10px}
.ing__ex{
  font-size:1rem;color:var(--navy);
  background:var(--gray-50);border-left:4px solid var(--blue-bright);
  border-radius:0 8px 8px 0;padding:10px 14px;
}

/* ===== 색 범례 ===== */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.legend__item{display:inline-flex;align-items:center;gap:6px;font-size:1rem;color:var(--gray-700);font-weight:700}
.dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.dot--s{background:var(--blue-soft);border:1.5px solid var(--blue-bright)}
.dot--o{background:var(--green-soft);border:1.5px solid var(--green)}
.dot--f{background:var(--orange-soft);border:1.5px solid var(--orange)}

/* ===== 프롬프트 박스 ===== */
.tpl-box{
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:20px;overflow-x:auto;
  box-shadow:var(--shadow-sm);
}
.tpl-box--slim{padding:16px 20px;margin-top:6px}
.tpl-box--preview{background:var(--gray-50)}
.tpl{
  font-family:inherit;
  font-size:1.125rem;line-height:1.8;
  white-space:pre-wrap;word-break:keep-all;
  color:var(--ink);
}
.mk{border-radius:5px;padding:1px 3px}
.mk--s{background:var(--blue-soft);box-shadow:inset 0 0 0 1px #bcd6ff}
.mk--o{background:var(--green-soft);color:var(--green);font-weight:800}
.mk--f{background:var(--orange-soft)}

/* 빌더 미리보기 토큰 */
.tk-filled{color:var(--blue);font-weight:800;border-bottom:2px solid var(--blue-bright);background:var(--blue-soft);border-radius:4px 4px 0 0;padding:0 2px}
.tk-empty,.tk-edit{background:var(--yellow-soft);color:var(--yellow-ink);font-weight:700;border-radius:4px;padding:0 4px}

/* ===== STEP3 방법 카드 ===== */
.method{
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:26px 22px;margin-bottom:26px;
  box-shadow:var(--shadow-sm);
}
.section--alt .method{background:var(--white)}
.method__title{font-size:1.35rem;font-weight:900;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.method__no{
  font-size:.92rem;font-weight:800;color:var(--white);
  background:var(--navy);border-radius:8px;padding:4px 10px;
}
.method__when{color:var(--gray-700);margin-bottom:16px}
.method--soon{border-style:dashed;box-shadow:none}
.method .tpl-box{border-radius:var(--radius);box-shadow:none;background:var(--gray-50)}

.bonus{
  border-top:2px dashed var(--gray-200);
  margin-top:36px;padding-top:8px;
}
.bonus .btn-steps{margin-bottom:18px}
.bonus .btn-steps .btn{max-width:220px}

/* ===== STEP4 빌더 ===== */
.builder{margin-top:6px}
.builder__fields{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){
  .builder__fields{grid-template-columns:1fr 1fr}
  .field:not(.field--half){grid-column:1 / -1}
}
.field label{display:block;font-size:1.02rem;font-weight:800;color:var(--navy);margin-bottom:6px}
.field input{
  width:100%;min-height:56px;padding:12px 16px;
  font-size:1.06rem;font-family:inherit;color:var(--ink);
  border:1.5px solid var(--gray-300);border-radius:var(--radius);
  background:var(--white);
}
.field input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.field input::placeholder{color:#8c99ab}
.field__unit{display:flex;align-items:center;gap:10px}
.field__unit input{flex:1}
.field__unit span{font-weight:800;color:var(--gray-700);flex-shrink:0}

.builder__pick{border:none;margin-top:32px}
.builder__pick legend{font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:14px}
.pick{
  display:flex;align-items:center;gap:14px;
  background:var(--white);border:2px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:10px;
  cursor:pointer;transition:border-color .2s,background .2s;
}
.pick:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.pick input{width:24px;height:24px;accent-color:var(--blue);flex-shrink:0}
.pick__body{display:flex;flex-direction:column}
.pick__body strong{font-size:1.1rem;font-weight:800;color:var(--navy)}
.pick__body span{font-size:.98rem;color:var(--gray-500)}

.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-1px}
.swatch--filled{background:var(--blue-soft);border-bottom:2px solid var(--blue-bright)}
.swatch--empty{background:var(--yellow-soft);border:1px solid #e5cf7a}

/* ===== STEP5 GPTs ===== */
.gpts{list-style:none;display:flex;flex-direction:column;gap:14px}
.gpt-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--white);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:22px;
  box-shadow:var(--shadow-sm);
}
@media(min-width:640px){
  .gpt-card{flex-direction:row;align-items:center;justify-content:space-between}
  .gpt-card .btn{flex-shrink:0}
}
.gpt-card__name{font-size:1.15rem;font-weight:900;color:var(--navy);margin-bottom:4px}
.gpt-card__desc{font-size:1.02rem;color:var(--gray-700)}
.gpt-card--padlet{border-style:dashed}

/* ===== FAQ ===== */
.faq{display:flex;flex-direction:column;gap:16px}
.faq__item{
  background:var(--gray-50);border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg);padding:20px 22px;
}
.faq__item dt{font-size:1.15rem;font-weight:900;color:var(--navy);margin-bottom:8px}
.faq__item dt::before{content:"Q. ";color:var(--blue)}
.faq__item dd{color:var(--gray-700)}
.faq__item dd strong{color:var(--navy);font-weight:800}

/* ===== 푸터 ===== */
.footer{background:var(--navy);color:#cfe0f5;padding:52px 0 44px;font-size:1rem}
.footer__credit{margin-bottom:14px;line-height:1.9}
.footer__credit strong{color:var(--white);font-weight:800}
.footer__note{color:#9db8dc;margin-bottom:22px}
.footer__links{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.footer__links a{color:#cfe0f5;text-decoration:underline;text-underline-offset:3px}
.footer__links a:hover{color:var(--white)}
.footer__year{color:#7f9cc4;font-size:.95rem}

/* ===== 수동 복사 시트 ===== */
.sheet{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(11,36,71,.55);
  padding:0;
}
.sheet[hidden]{display:none}
.sheet__card{
  width:100%;max-width:640px;
  background:var(--white);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:26px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
}
.sheet__title{font-size:1.25rem;font-weight:900;color:var(--navy);margin-bottom:6px}
.sheet__sub{color:var(--gray-700);margin-bottom:14px;font-size:1rem}
.sheet__sub strong{color:var(--navy)}
.sheet__text{
  width:100%;font-family:inherit;font-size:1.06rem;line-height:1.7;
  color:var(--ink);border:1.5px solid var(--gray-300);border-radius:var(--radius);
  padding:14px;margin-bottom:14px;resize:none;background:var(--gray-50);
}
.sheet .btn{width:100%}

/* ===== 토스트 ===== */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  z-index:1100;
  max-width:calc(100vw - 40px);
  background:var(--navy);color:var(--white);
  font-size:1.02rem;font-weight:700;
  border-radius:999px;padding:14px 24px;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .toast{transition:none}
}