:root{
  --ink:#102420;
  --ink-soft:#19322b;
  --off:#f8f5ec;
  --off-dim:#efe9d8;
  --sage-pale:#e3ede4;
  --accent:#e8b865;
  --accent-deep:#d49f45;
  --sage:#7fbf9e;
  --line:rgba(16,36,32,0.14);
  --line-on-dark:rgba(248,245,236,0.16);
  --radius:18px;
  --maxw:1180px;
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", system-ui, Roboto, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--off);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--accent); color:var(--ink); padding:12px 18px;
  border-radius:0 0 10px 0; z-index:200; font-weight:700;
}
.skip-link:focus{left:0;}
:focus-visible{
  outline:3px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:4px;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(248,245,236,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--maxw); margin:0 auto;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:1rem; letter-spacing:0.01em;
  text-decoration:none;
  min-width:0;
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.brand small{display:block; font-weight:500; font-size:0.64rem; color:#52584a; letter-spacing:0.02em;}
nav.primary-nav{display:flex; align-items:center; gap:24px;}
nav.primary-nav a{
  text-decoration:none; font-weight:600; font-size:0.94rem; color:var(--ink-soft);
  padding:6px 2px; position:relative; white-space:nowrap;
}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--accent-deep); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
nav.primary-nav a:hover::after, nav.primary-nav a:focus-visible::after{transform:scaleX(1);}
nav.primary-nav a[aria-current="page"]{color:var(--ink); font-weight:800;}
nav.primary-nav a[aria-current="page"]::after{transform:scaleX(1);}
.nav-cta{
  background:var(--ink); color:var(--off) !important; padding:10px 18px;
  border-radius:999px; font-weight:700; font-size:0.9rem !important;
}
.nav-cta::after{display:none;}
.lang-toggle{
  display:flex; align-items:center; gap:2px;
  background:var(--off-dim); border:1px solid var(--line); border-radius:999px;
  padding:3px; flex-shrink:0;
}
.lang-toggle button{
  border:none; background:transparent; cursor:pointer;
  font-weight:800; font-size:0.76rem; letter-spacing:0.03em;
  padding:6px 12px; border-radius:999px; color:var(--ink-soft);
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink); color:var(--off);}
.menu-toggle{
  display:none; background:none; border:2px solid var(--ink); border-radius:10px;
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center;
  flex-shrink:0;
}
.menu-toggle .bar, .menu-toggle .bar::before, .menu-toggle .bar::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle .bar::before{position:absolute; top:-7px;}
.menu-toggle .bar::after{position:absolute; top:7px;}
.menu-toggle[aria-expanded="true"] .bar{background:transparent;}
.menu-toggle[aria-expanded="true"] .bar::before{transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] .bar::after{transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  nav.primary-nav{
    position:fixed; inset:72px 0 0 0; background:var(--off);
    flex-direction:column; align-items:stretch; gap:0;
    padding:12px 24px 24px; border-top:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    overflow-y:auto;
  }
  nav.primary-nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  nav.primary-nav a{padding:16px 4px; border-bottom:1px solid var(--line); font-size:1.05rem;}
  .nav-cta{margin-top:12px; text-align:center;}
  .lang-toggle{margin-top:12px; justify-content:center;}
  .menu-toggle{display:flex;}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--ink); color:var(--off);
  padding:72px 0 88px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-120px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,184,101,0.2), transparent 70%);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr;} }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.76rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); background:rgba(232,184,101,0.1);
  border:1px solid rgba(232,184,101,0.35);
  padding:8px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.25rem, 4vw, 3.5rem);
  line-height:1.18; font-weight:800; margin:0 0 22px;
  letter-spacing:-0.045em;
}
.hero h1 em{color:var(--accent); font-style:normal;}
.hero p.lead{
  font-size:1.1rem; color:rgba(248,245,236,0.78); max-width:48ch; margin:0 0 20px;
}
.hero p.lead-en{
  font-size:0.92rem; color:rgba(248,245,236,0.55); max-width:50ch; margin:0 0 32px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:0.96rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  font-family:inherit;
}
.btn-primary{background:var(--accent); color:var(--ink);}
.btn-primary:hover{background:var(--accent-deep);}
.btn-ghost{border-color:rgba(248,245,236,0.35); color:var(--off); background:transparent;}
.btn-ghost:hover{border-color:var(--accent);}
.btn-outline-dark{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline-dark:hover{background:var(--ink); color:var(--off);}
.btn-sm{padding:9px 16px; font-size:0.84rem;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}
.hero-note{
  margin-top:28px; font-size:0.82rem; color:rgba(248,245,236,0.55);
}

/* Page hero (subpages) */
.page-hero{background:var(--ink); color:var(--off); padding:56px 0 64px; position:relative; overflow:hidden;}
.page-hero::before{content:""; position:absolute; top:-100px; right:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(232,184,101,0.18), transparent 70%);}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(1.9rem, 4vw, 2.8rem); font-weight:800; margin:14px 0 14px; letter-spacing:-0.02em;}
.page-hero p.lead{font-size:1.04rem; color:rgba(248,245,236,0.78); max-width:62ch; margin:0 0 10px;}
.page-hero p.lead-en{font-size:0.9rem; color:rgba(248,245,236,0.55); max-width:62ch; margin:0;}
.breadcrumb{font-size:0.82rem; color:rgba(248,245,236,0.55);}
.breadcrumb a{text-decoration:underline;}

/* Concept workflow panel */
.concept-panel{
  background:var(--ink-soft); border:1px solid var(--line-on-dark);
  border-radius:var(--radius); padding:22px;
}
.concept-tag{
  display:inline-block; font-size:0.72rem; font-weight:800; letter-spacing:0.08em;
  color:var(--ink); background:var(--accent); padding:5px 10px; border-radius:999px;
  margin-bottom:16px; text-transform:uppercase;
}
.concept-flow{display:flex; flex-direction:column; gap:10px;}
.flow-step{
  display:flex; align-items:center; gap:12px;
  background:rgba(248,245,236,0.05);
  border:1px solid var(--line-on-dark);
  border-radius:12px; padding:12px 14px;
  font-size:0.88rem; color:rgba(248,245,236,0.88);
}
.flow-step .dot{
  width:26px; height:26px; border-radius:8px; background:rgba(232,184,101,0.16);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.78rem; flex-shrink:0;
}
.flow-arrow{align-self:center; color:rgba(248,245,236,0.35); font-size:0.9rem;}
.concept-caption{
  margin-top:14px; font-size:0.78rem; color:rgba(248,245,236,0.5);
}

/* ---------- Sections ---------- */
section{padding:84px 0;}
.section-head{max-width:640px; margin:0 0 48px;}
.kicker{
  font-size:0.76rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:#5c7a56; margin-bottom:10px;
}
.section-head h2{
  font-size:clamp(1.6rem, 3.2vw, 2.3rem); margin:0 0 14px; font-weight:800; letter-spacing:-0.01em;
}
.section-head p{color:#43483b; font-size:1.02rem; max-width:58ch;}

.overview-box{
  background:var(--sage-pale); border:1px solid var(--line);
  border-radius:var(--radius); padding:28px 30px; font-size:1.02rem; color:#2a3426;
}
.overview-box strong{color:var(--ink);}

/* Projects */
.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
@media (max-width:980px){ .card-grid{grid-template-columns:1fr;} }
.project-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; gap:14px;
}
.card-icon{
  width:48px; height:48px; border-radius:12px; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.project-card h3{margin:0; font-size:1.18rem; font-weight:800;}
.project-card p{margin:0; color:#43483b; font-size:0.95rem;}
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.74rem; font-weight:700; color:#6b5a32;
  background:var(--off-dim); border:1px solid var(--line);
  padding:5px 10px; border-radius:999px; width:fit-content;
}
.status-pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-deep);}
.status-pill.pending::before{background:#b4522e;}
.status-pill.reviewed::before{background:#4f8a5a;}
.project-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
.project-tags span{
  font-size:0.74rem; background:var(--off-dim); color:#44493a;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line);
}
.card-disclaimer{
  margin-top:28px; background:var(--sage-pale); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; font-size:0.88rem; color:#2a3426;
}

/* Approach */
.approach-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
@media (max-width:980px){ .approach-wrap{grid-template-columns:1fr;} }
.principle-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.principle-list li{
  display:flex; gap:14px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px 18px;
}
.principle-list .num{
  font-weight:800; color:var(--ink); background:var(--accent);
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0.85rem;
}
.principle-list h4{margin:0 0 4px; font-size:1rem; font-weight:800;}
.principle-list p{margin:0; font-size:0.9rem; color:#43483b;}

.future-box{
  background:var(--ink); color:var(--off); border-radius:var(--radius);
  padding:30px; height:100%;
}
.future-box h3{margin:0 0 12px; font-size:1.2rem; font-weight:800; color:var(--accent);}
.future-box p{color:rgba(248,245,236,0.82); font-size:0.95rem; margin:0 0 16px;}
.future-box ul{margin:0; padding-left:20px; color:rgba(248,245,236,0.82); font-size:0.92rem; display:flex; flex-direction:column; gap:8px;}
.future-box .fine-note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-on-dark);
  font-size:0.78rem; color:rgba(248,245,236,0.45);
}

.guardrail-strip{
  margin-top:40px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.guardrail-strip h3{margin:0 0 10px; font-size:1.05rem; font-weight:800;}
.guardrail-strip ul{margin:0; padding-left:20px; font-size:0.93rem; color:#43483b; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px;}
@media (max-width:700px){ .guardrail-strip ul{grid-template-columns:1fr;} }

/* Roadmap */
.roadmap-list{
  display:flex; flex-direction:column; gap:0; border-left:3px solid var(--line); margin-left:10px;
}
.roadmap-item{position:relative; padding:0 0 36px 32px;}
.roadmap-item:last-child{padding-bottom:0;}
.roadmap-item::before{
  content:""; position:absolute; left:-9px; top:2px;
  width:16px; height:16px; border-radius:50%; background:var(--off);
  border:3px solid var(--accent-deep);
}
.roadmap-item.now::before{background:var(--accent-deep);}
.roadmap-phase{font-size:0.76rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#6b5a32; margin-bottom:6px;}
.roadmap-item h3{margin:0 0 8px; font-size:1.1rem; font-weight:800;}
.roadmap-item p{margin:0; color:#43483b; font-size:0.94rem; max-width:62ch;}
.roadmap-item .roadmap-note{
  margin-top:8px; font-size:0.82rem; color:#6b5a32; font-style:italic;
}

/* FAQ */
.faq-list{display:flex; flex-direction:column; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 20px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .icon{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--ink); display:flex; align-items:center; justify-content:center;
  font-weight:800; transition:transform .2s ease;
}
.faq-item[open] summary .icon{transform:rotate(45deg); background:var(--accent); border-color:var(--accent);}
.faq-item .faq-body{padding:0 20px 20px; color:#43483b; font-size:0.94rem;}

/* Contact */
.contact-box{
  background:var(--ink); color:var(--off); border-radius:var(--radius);
  padding:48px;
}
@media (max-width:860px){ .contact-box{padding:32px;} }
.contact-box h2{margin:0 0 14px; font-size:1.8rem; font-weight:800;}
.contact-box p{color:rgba(248,245,236,0.78); margin:0 0 20px; font-size:0.98rem; max-width:62ch;}
.collab-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.collab-list li{
  background:rgba(248,245,236,0.06); border:1px solid var(--line-on-dark);
  border-radius:12px; padding:14px 16px; font-size:0.94rem; color:rgba(248,245,236,0.9);
}
.collab-list li strong{color:var(--accent);}
.contact-note{
  font-size:0.8rem; color:rgba(248,245,236,0.5); border-top:1px solid var(--line-on-dark);
  padding-top:16px; margin-top:20px;
}

footer.site-footer{
  background:var(--off-dim); border-top:1px solid var(--line); padding:48px 0 32px;
}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;}
@media (max-width:780px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h4{margin:0 0 12px; font-size:0.85rem; font-weight:800; letter-spacing:0.04em;}
.footer-grid p, .footer-grid li{font-size:0.88rem; color:#4c5140;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.footer-grid ul a{text-decoration:none; font-weight:600;}
.footer-grid ul a:hover{color:#5c7a56;}
.footer-bottom{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:0.8rem; color:#5c6150;
}
.footer-disclaimer{
  margin-top:14px; font-size:0.78rem; color:#6b5a32; max-width:80ch;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
h1,h2,h3,p,.brand{word-break:keep-all;overflow-wrap:break-word;}
@media(max-width:600px){.brand small{font-size:.55rem;max-width:240px}.brand{font-size:.9rem}.hero h1{font-size:2.3rem}.wrap{padding:0 20px}}

/* ---------- i18n toggle ----------
   Default: show Korean, hide English. Toggling html[data-lang] flips which
   one is visible. The .ib/.blk utility classes only take effect for the
   currently active language, so they never force a hidden node to render. */
[data-i18n]{display:none;}
html[data-lang="ko"] [data-i18n="ko"].ib{display:inline;}
html[data-lang="ko"] [data-i18n="ko"].blk{display:block;}
html[data-lang="en"] [data-i18n="en"].ib{display:inline;}
html[data-lang="en"] [data-i18n="en"].blk{display:block;}
/* Fallback: if the html[data-lang] attribute is missing for any reason,
   default to showing Korean so content is never silently blank. */
html:not([data-lang]) [data-i18n="ko"].ib{display:inline;}
html:not([data-lang]) [data-i18n="ko"].blk{display:block;}

/* ---------- Demo page ---------- */
.notice-banner{
  display:flex; gap:12px; align-items:flex-start;
  background:#2c1810; border:1px solid #6b4226; color:#ffe3c2;
  border-radius:14px; padding:16px 18px; font-size:0.92rem; margin-bottom:28px;
}
.notice-banner .ic{font-size:1.2rem; line-height:1; flex-shrink:0;}
.notice-banner strong{color:#ffd79a;}
.notice-banner.light{background:#fff7e8; border-color:#e8c488; color:#5c4420;}
.notice-banner.light strong{color:#6b4226;}

.demo-grid{display:grid; grid-template-columns:1fr; gap:28px;}
.demo-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px;}
.demo-panel h3{margin:0 0 6px; font-size:1.08rem; font-weight:800;}
.demo-panel .hint{font-size:0.85rem; color:#5c6150; margin:0 0 14px;}
.demo-panel textarea{
  width:100%; min-height:88px; resize:vertical; font-family:inherit; font-size:0.96rem;
  border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--off-dim); color:var(--ink);
}
.demo-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px;}
.demo-status-line{margin-top:14px; font-size:0.84rem; color:#5c6150;}

.result-card{
  background:var(--off-dim); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin-top:16px;
}
.result-card h4{margin:0 0 10px; font-size:1.02rem; font-weight:800;}
.result-field{margin:0 0 10px;}
.result-field .k{font-size:0.72rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:#6b5a32; margin-bottom:3px;}
.result-field .v{font-size:0.92rem; color:#2a3426;}
.result-field .v.mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.84rem; color:#43483b;}
.result-footer{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap;}
#demoOutput:empty::before{
  content:"아직 실행 결과가 없습니다. 위에서 샘플 워크플로우를 실행해 보세요. / No output yet. Run the sample workflow above.";
  display:block; color:#7a7f6c; font-size:0.9rem; padding:18px 0;
}

/* Generic content pages (about / privacy / changelog) */
.prose{max-width:74ch;}
.prose h2{font-size:1.3rem; font-weight:800; margin:40px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 14px; color:#2a3426; font-size:0.98rem;}
.prose p.en{color:#5c6150; font-size:0.9rem;}
.prose ul{margin:0 0 14px; padding-left:22px; color:#2a3426; font-size:0.96rem;}
.fact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0 32px;}
@media (max-width:700px){ .fact-grid{grid-template-columns:1fr;} }
.fact-card{background:var(--sage-pale); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
.fact-card .k{font-size:0.74rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#5c7a56; margin-bottom:6px;}
.fact-card .v{font-size:0.98rem; font-weight:700; color:var(--ink);}
.changelog-item{border-left:3px solid var(--line); padding:0 0 28px 20px; position:relative; margin-left:6px;}
.changelog-item::before{content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--accent-deep);}
.changelog-item .date{font-size:0.78rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#6b5a32; margin-bottom:6px;}
.changelog-item h3{margin:0 0 8px; font-size:1.02rem; font-weight:800;}
.changelog-item ul{margin:0; padding-left:20px; font-size:0.92rem; color:#43483b;}