/* ============================================================
   다시,봄 (BLOOMEEL) — 사용 설명서 deck styles
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

:root{
  /* paper / surfaces */
  --paper:      #F5F8EB;
  --paper-2:    #EFF3E0;
  --leaf-soft:  #E7EFD2;
  --leaf-line:  #D9E3BC;
  --leaf-line-2:#E3EACF;

  /* greens */
  --green:      #84A85B;
  --green-deep: #6E9347;
  --leaf-mark:  #7BA24E;

  /* ink / text */
  --ink:    #2C3A1C;
  --ink-2:  #45562F;
  --gray:   #6E7568;
  --gray-2: #939A8A;

  /* pink accent */
  --pink-bg:  #F7DCE0;
  --pink-bg-2:#FBEAEC;
  --pink-ink: #CE7C88;

  --font-head: "Paperlogy", "Pretendard", sans-serif;
  --font-body: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:"Gowun Batang", serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; padding:0; background:#1c2412; }

deck-stage:not(:defined){ visibility:hidden; }

/* every slide = same paper canvas */
.slide{
  width:1920px; height:1080px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  overflow:hidden;
  position:relative;
}

/* soft decorative blossoms in the paper grain */
.slide::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(620px 480px at 100% 0%,   rgba(247,220,224,.34), transparent 60%),
    radial-gradient(680px 560px at 0% 100%,    rgba(231,239,210,.55), transparent 62%);
  pointer-events:none;
}
.slide > *{ position:relative; z-index:1; }

/* ---------- shared brand bits ---------- */
.brand{ display:flex; align-items:center; gap:18px; }
.brand-mark{
  width:64px; height:64px; border-radius:18px;
  background:var(--leaf-mark);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-head); font-weight:800; font-size:30px;
  box-shadow:0 6px 18px rgba(123,162,78,.28);
}
.brand-word{ font-family:var(--font-head); font-weight:800; font-size:34px; color:var(--ink); line-height:1; }
.brand-sub{ font-family:var(--font-head); font-weight:600; font-size:14px; letter-spacing:.32em; color:var(--gray-2); margin-top:6px; }

.badge{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--pink-bg); color:var(--pink-ink);
  font-weight:700; font-size:24px;
  padding:13px 26px; border-radius:999px;
}
.badge.leaf{ background:var(--leaf-soft); color:var(--green-deep); }

/* ---------- top chrome on content slides ---------- */
.topbar{
  position:absolute; top:64px; left:110px; right:110px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar .brand-mark{ width:48px; height:48px; border-radius:14px; font-size:23px; }
.topbar .brand-word{ font-size:26px; }
.step-meta{ display:flex; align-items:center; gap:18px; }
.step-counter{ font-family:var(--font-head); font-weight:700; font-size:24px; color:var(--green-deep); letter-spacing:.04em; }
.progress-track{ width:240px; height:8px; border-radius:99px; background:var(--leaf-line); overflow:hidden; }
.progress-fill{ height:100%; border-radius:99px; background:var(--green); }

/* ===========================================================
   COVER
   =========================================================== */
.cover{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 160px; }
.cover .brand{ position:absolute; top:64px; left:110px; }
.cover-badge{ margin-bottom:40px; }
.cover h1{
  font-family:var(--font-head); font-weight:800;
  font-size:184px; line-height:.96; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}
.cover h1 .accent{ color:var(--green); }
.cover .lead{
  font-family:var(--font-serif); font-size:40px; line-height:1.6; color:var(--ink-2);
  margin:46px 0 0; max-width:1180px;
}
.cover .flow{
  margin-top:64px; display:flex; align-items:center; gap:26px;
  font-family:var(--font-head); font-weight:700; font-size:30px; color:var(--green-deep);
}
.cover .flow .dot{ width:12px; height:12px; border-radius:50%; background:var(--green); }
.cover .flow .arrow{ color:var(--leaf-line); font-weight:800; }
.cover .hint{
  position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  font-size:22px; color:var(--gray-2); font-weight:600;
  display:flex; align-items:center; gap:12px;
}
.keycap{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:10px; background:#fff; border:1px solid var(--leaf-line);
  font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--ink-2);
  box-shadow:0 2px 0 var(--leaf-line);
}

/* ===========================================================
   SECTION INTRO (3-step summary)
   =========================================================== */
.section-head{ position:absolute; top:170px; left:110px; }
.section-head .eyebrow{ font-weight:700; font-size:26px; color:var(--pink-ink); margin-bottom:14px; }
.section-head h2{ font-family:var(--font-head); font-weight:800; font-size:104px; line-height:1; color:var(--ink); margin:0; }
.section-head h2 small{ display:block; font-size:38px; font-weight:600; color:var(--gray); margin-top:24px; font-family:var(--font-body); }

.three{
  position:absolute; left:110px; right:110px; bottom:120px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:42px;
}
.three-card{
  background:#fff; border:1px solid var(--leaf-line-2); border-radius:34px;
  padding:54px 50px 56px; position:relative; min-height:430px;
  box-shadow:0 22px 44px rgba(78,98,40,.07);
}
.three-card .num{
  width:80px; height:80px; border-radius:24px;
  background:var(--leaf-soft); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:800; font-size:42px; margin-bottom:34px;
}
.three-card .ic{ position:absolute; top:54px; right:50px; color:var(--green); opacity:.9; }
.three-card h3{ font-family:var(--font-head); font-weight:800; font-size:42px; color:var(--ink); margin:0 0 18px; }
.three-card p{ font-size:27px; line-height:1.62; color:var(--gray); margin:0; }

/* ===========================================================
   STEP DETAIL
   =========================================================== */
.step{ padding:160px 110px 96px; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.step.flip .step-body{ order:2; }
.step.flip .step-visual{ order:1; }

.step-body{ padding-right:90px; }
.step.flip .step-body{ padding-right:0; padding-left:90px; }

.step-kicker{ display:flex; align-items:center; gap:22px; margin-bottom:30px; }
.step-num{
  font-family:var(--font-head); font-weight:800; font-size:30px;
  color:#fff; background:var(--green); border-radius:16px;
  padding:8px 22px; letter-spacing:.04em;
}
.step-tag{ font-weight:700; font-size:26px; color:var(--gray-2); }
.step-body h2{ font-family:var(--font-head); font-weight:800; font-size:84px; line-height:1.02; color:var(--ink); margin:0 0 30px; letter-spacing:-.01em; }
.step-body .desc{ font-size:31px; line-height:1.66; color:var(--ink-2); margin:0; max-width:760px; }
.step-body .desc + .desc{ margin-top:18px; }

.tip{
  margin-top:42px; display:flex; align-items:flex-start; gap:18px;
  background:var(--leaf-soft); border-radius:22px; padding:26px 30px;
  max-width:760px;
}
.tip .tip-ic{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-family:var(--font-head); font-weight:800; }
.tip .tip-txt{ font-size:25px; line-height:1.55; color:var(--green-deep); font-weight:600; }
.tip .tip-txt b{ color:var(--ink); font-weight:800; }

/* notice variant (warm but clear) */
.notice{
  margin-top:36px; display:flex; align-items:flex-start; gap:18px;
  background:var(--pink-bg-2); border:1.5px solid var(--pink-bg); border-radius:22px;
  padding:26px 30px; max-width:780px;
}
.notice .n-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:var(--pink-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px; }
.notice .n-txt{ font-size:25px; line-height:1.55; color:#a85e69; font-weight:600; }
.notice .n-txt b{ color:#9c5460; font-weight:800; }

/* question chips (record step) */
.q-list{ margin-top:34px; display:flex; flex-direction:column; gap:14px; max-width:780px; }
.q-list .q{
  display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--leaf-line-2); border-radius:18px;
  padding:20px 26px; font-size:26px; color:var(--ink-2); font-family:var(--font-serif);
}
.q-list .q .qm{ font-family:var(--font-head); font-weight:800; color:var(--pink-ink); font-size:28px; }

/* spec chips (payment step) */
.spec-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; max-width:780px; }
.spec{
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--leaf-line-2); border-radius:16px;
  padding:16px 24px; font-size:24px; font-weight:600; color:var(--ink-2);
}
.spec .s-ic{ color:var(--green); }

/* ---- visual panel ---- */
.step-visual{ height:760px; border-radius:44px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 60px rgba(78,98,40,.10), inset 0 0 0 1px rgba(255,255,255,.4); }
.gv-1{ background:linear-gradient(150deg,#EAF1D7 0%, #F3E6E8 100%); }
.gv-2{ background:linear-gradient(150deg,#E6EFD4 0%, #E9F0E0 100%); }
.gv-3{ background:linear-gradient(150deg,#F4E6E7 0%, #ECF1DC 100%); }
.gv-4{ background:linear-gradient(150deg,#EAF0DA 0%, #F1E9E2 100%); }

.glyph{ color:var(--green-deep); opacity:.92; filter:drop-shadow(0 10px 22px rgba(110,147,71,.18)); }

/* faux ui mock inside visual */
.mock{
  position:absolute; background:#fff; border-radius:22px;
  box-shadow:0 18px 40px rgba(78,98,40,.16);
  border:1px solid var(--leaf-line-2);
}
.blossom{ position:absolute; color:#fff; opacity:.5; }

/* ===========================================================
   FAQ
   =========================================================== */
.faq{ padding:140px 110px 80px; }
.faq .section-head{ position:static; margin-bottom:44px; }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 48px; }
.fa{
  background:#fff; border:1px solid var(--leaf-line-2); border-radius:26px;
  padding:32px 40px; box-shadow:0 16px 34px rgba(78,98,40,.06);
}
.fa .q{ display:flex; gap:16px; align-items:flex-start; font-family:var(--font-head); font-weight:800;
  font-size:29px; color:var(--ink); margin-bottom:14px; line-height:1.3; }
.fa .q .qm{ color:var(--green); flex:0 0 auto; }
.fa .a{ font-size:24px; line-height:1.56; color:var(--gray); padding-left:42px; }
.fa .a b{ color:var(--ink-2); font-weight:700; }

/* ===========================================================
   CLOSING
   =========================================================== */
.closing{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 160px; }
.closing .brand-mark{ width:88px; height:88px; border-radius:24px; font-size:40px; margin-bottom:48px; }
.closing h2{ font-family:var(--font-serif); font-weight:700; font-size:78px; line-height:1.4; color:var(--ink); margin:0; }
.closing .sub{ font-size:30px; color:var(--gray); margin-top:40px; line-height:1.6; max-width:980px; }
.closing .contact{
  margin-top:56px; display:inline-flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--leaf-line); border-radius:999px;
  padding:22px 40px; font-size:30px; font-weight:700; color:var(--green-deep);
  box-shadow:0 14px 30px rgba(78,98,40,.08);
}
.closing .safe{
  margin-top:40px; display:inline-flex; align-items:center; gap:12px;
  font-size:23px; color:var(--gray-2);
}

/* ===========================================================
   ENTRANCE ANIMATIONS  (end-state is base; animate from hidden)
   =========================================================== */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .r{ animation:rise .72s cubic-bezier(.2,.75,.25,1) both; animation-delay:var(--d,0s); }
  @keyframes rise{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }

  [data-deck-active] .r-scale{ animation:pop .7s cubic-bezier(.2,.8,.25,1) both; animation-delay:var(--d,0s); }
  @keyframes pop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }

  [data-deck-active] .float{ animation:floaty 6s ease-in-out infinite; }
  @keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
}