/* =========================================================
   Tokens
========================================================= */
:root{
  --bg:#0a0d12;
  --bg-alt:#0d1016;
  --surface:#12161e;
  --surface-2:#171c26;
  --border:#232a38;
  --text:#eef1f6;
  --text-dim:#8b93a7;
  --text-faint:#5b6478;
  --gold:#d4a537;
  --gold-soft:rgba(212,165,55,.14);
  --risk:#d1495b;
  --gain:#3fae6a;
  --font-display:'Noto Serif KR', serif;
  --font-body:'Pretendard','Noto Sans KR',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --container:1160px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scroll-padding-top:126px;
}
body{
  background:
    radial-gradient(1000px 700px at var(--gx1,50%) var(--gy1,15%), rgba(212,165,55,.13), transparent 60%),
    radial-gradient(900px 650px at var(--gx2,85%) var(--gy2,55%), rgba(63,174,106,.07), transparent 55%),
    radial-gradient(800px 600px at var(--gx3,10%) var(--gy3,80%), rgba(209,73,91,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .05s linear;
}
a{color:inherit;}
img{max-width:100%;display:block;}

/* =========================================================
   Nav
========================================================= */
nav{
  position:fixed;top:0;left:0;width:100%;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:48px;
  padding:18px 48px;
  background:rgba(10,13,18,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}
.logo{display:flex;align-items:center;gap:14px;margin-left:16%;}
.logo img{width:38px;height:38px;object-fit:contain;}
.logo-text h1{
  font-family:var(--font-mono);
  font-size:15px;letter-spacing:3px;font-weight:600;color:var(--text);
}
.logo-text p{
  font-size:10px;letter-spacing:2px;color:var(--text-faint);
  text-transform:uppercase;margin-top:2px;
}
nav ul{display:flex;list-style:none;gap:30px;align-items:center;}
nav a{
  font-size:13.5px;color:var(--text-dim);text-decoration:none;
  position:relative;padding-bottom:4px;transition:.25s;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold);transition:.25s;
}
nav a:hover{color:var(--text);}
nav a:hover::after{width:100%;}

@media(max-width:900px){
  nav ul{display:none;}
  nav{padding:16px 24px;}
  .logo{margin-left:0;}
}

/* =========================================================
   Hero — thesis statement, editorial quote treatment
========================================================= */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:140px 24px 100px;
  position:relative;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:radial-gradient(ellipse 900px 500px at 50% -10%, rgba(212,165,55,.08), transparent 60%);
}
.hero-quote{
  font-family:var(--font-display);
  font-size:clamp(22px,3vw,34px);
  font-weight:500;
  line-height:1.6;
  color:#ffffff;
  max-width:760px;
  font-style:italic;
  white-space:nowrap;
}
.hero-quote span{color:#ffffff;font-style:italic;}
.hero-quote .kr{
  display:block;margin-top:16px;font-family:var(--font-body);
  font-style:normal;font-size:14px;letter-spacing:.3px;
  color:var(--gold);
  white-space:normal;
}
.hero-attrib{
  margin-top:22px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:2px;color:var(--text-faint);text-transform:uppercase;
}
.hero-attrib .kr{
  display:block;margin-top:5px;font-size:9px;letter-spacing:1px;
  color:var(--text-faint);text-transform:none;font-family:var(--font-body);
  opacity:.75;
}
.hero-divider{
  width:1px;height:64px;background:linear-gradient(var(--border),transparent);
  margin:56px 0 40px;
}
.hero-brand h1{
  font-family:var(--font-mono);
  font-size:clamp(38px,6vw,64px);
  letter-spacing:6px;font-weight:700;color:var(--text);
}
.hero-brand p{
  margin-top:14px;font-size:15px;letter-spacing:4px;
  color:var(--gold);text-transform:uppercase;font-family:var(--font-mono);
}
.hero-brand p .kr{
  display:block;margin-top:8px;font-size:12px;letter-spacing:1px;
  color:var(--text-dim);text-transform:none;font-family:var(--font-body);
}
.scroll-cue{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-decoration:none;color:var(--text-faint);
}
.scroll-cue span{
  font-family:var(--font-mono);font-size:10px;letter-spacing:3px;
  text-align:center;
}
.scroll-cue span em{
  display:block;margin-top:4px;font-size:8px;letter-spacing:2px;
  font-style:normal;color:var(--text-faint);opacity:.75;
}
.scroll-cue i{
  width:1px;height:40px;background:var(--border);position:relative;overflow:hidden;
}
.scroll-cue i::after{
  content:"";position:absolute;top:-40px;left:0;width:100%;height:40%;
  background:var(--gold);animation:tick 1.8s ease-in-out infinite;
}
@keyframes tick{
  0%{top:-40%;}
  60%{top:100%;}
  100%{top:100%;}
}

/* =========================================================
   Section shell
========================================================= */
section{
  width:90%;max-width:var(--container);margin:auto;padding:130px 0;
  border-bottom:1px solid var(--border);
  min-height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;
}
section:last-of-type{border-bottom:none;}
#feature{padding:90px 0;}
#philosophy{padding:90px 0;}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:3px;
  color:var(--gold);text-transform:uppercase;text-align:center;
  display:block;margin-bottom:18px;
}
section h2{
  font-family:var(--font-display);
  font-size:clamp(30px,4vw,42px);
  text-align:center;font-weight:600;margin-bottom:26px;
}
.intro{
  text-align:center;color:var(--text-dim);font-size:17px;
  max-width:680px;margin:auto;line-height:1.9;
}

/* =========================================================
   Feature cards (핵심기능)
========================================================= */
.cards{
  margin-top:40px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr;}
}
.card{
  background:var(--surface);padding:26px 24px;transition:.3s;
}
.card:hover{background:var(--surface-2);}
.card .tag{
  font-family:var(--font-mono);font-size:11px;color:var(--gold);
  letter-spacing:2px;margin-bottom:16px;display:block;
}
.card h3{font-size:19px;font-weight:600;margin-bottom:12px;}
.card p{color:var(--text-dim);font-size:14.5px;}

/* =========================================================
   Philosophy (연구철학) — core-value tiles, icon + statement
========================================================= */
.philosophy-grid{
  margin-top:40px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
}
@media(max-width:1000px){
  .philosophy-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .philosophy-grid{grid-template-columns:repeat(2,1fr);}
}
.philosophy-card{
  background:var(--surface);padding:22px 18px;
  position:relative;transition:.3s;
}
.philosophy-card:hover{background:var(--surface-2);}
.philosophy-card .mark{
  font-family:var(--font-mono);font-size:11px;color:var(--text-faint);
  margin-bottom:12px;display:block;
}
.philosophy-card h3{font-size:15px;margin-bottom:8px;font-weight:600;line-height:1.3;}
.philosophy-card h3 .kr{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--gold);}
.philosophy-card p{color:var(--text-dim);font-size:12.5px;line-height:1.6;}

/* =========================================================
   Analysis example (분석예시)
========================================================= */
.analysis-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);margin-top:56px;
}
.analysis-card{background:var(--surface);padding:38px;}
.analysis-card h3{
  font-family:var(--font-mono);font-size:14px;letter-spacing:1px;
  color:var(--text-dim);margin-bottom:28px;text-align:center;
  text-transform:uppercase;
}
.result{display:flex;flex-direction:column;gap:16px;}
.result p{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:1px solid var(--border);
  font-size:14.5px;color:var(--text-dim);
}
.result span{font-family:var(--font-mono);font-weight:600;color:var(--text);}
.result span.entry{color:var(--gold);}
.result span.stop{color:var(--risk);}
.result span.target{color:var(--gain);}

.analysis-visual-row{
  margin-top:70px;display:grid;
  grid-template-columns:1.15fr .85fr;grid-template-rows:repeat(4,1fr);
  gap:1px;background:var(--border);border:1px solid var(--border);
}
.chart-box{
  grid-row:1 / -1;background:var(--bg);padding:6px;
  display:flex;align-items:center;
}
.chart-box img{width:100%;}
.analysis-info{background:var(--surface);padding:24px 28px;display:flex;flex-direction:column;justify-content:center;}
.analysis-info h3{font-size:15.5px;margin-bottom:10px;}
.analysis-info p{color:var(--text-dim);font-size:14px;}
@media(max-width:860px){
  .analysis-visual-row{grid-template-columns:1fr;grid-template-rows:auto;}
  .chart-box{grid-row:auto;}
}

/* =========================================================
   Process (분석과정) — legitimate numbered sequence
========================================================= */
.process-grid{
  margin-top:64px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
}
.process-card{
  padding:0 28px;position:relative;border-left:1px solid var(--border);
}
.process-card:first-child{border-left:none;}
.process-card .number{
  font-family:var(--font-mono);font-size:13px;color:var(--gold);
  letter-spacing:2px;margin-bottom:20px;
}
.process-card h3{font-size:17px;margin-bottom:12px;font-weight:600;}
.process-card p{color:var(--text-dim);font-size:14px;}
@media(max-width:900px){
  .process-card{border-left:none;border-top:1px solid var(--border);padding:32px 0 0;}
  .process-card:first-child{border-top:none;}
}

/* =========================================================
   Timeline / 개발과정
========================================================= */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  margin-top:60px;margin-bottom:80px;
}
.stat-cell{background:var(--surface);padding:30px;text-align:center;}
.stat-cell .num{
  font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--gold);
}
.stat-cell .lbl{
  margin-top:10px;font-size:12.5px;color:var(--text-dim);letter-spacing:.5px;
}
.stat-cell .lbl .kr{
  display:block;margin-top:4px;font-size:11px;color:var(--text-faint);letter-spacing:0;
}

.timeline{display:flex;flex-direction:column;}
.timeline-item{
  display:grid;grid-template-columns:120px 1px 1fr;gap:34px;
  padding:36px 0;
}
.timeline-item .year{
  font-family:var(--font-mono);font-weight:700;color:var(--gold);font-size:16px;
  padding-top:2px;
}
.timeline-item .rail{background:var(--border);position:relative;}
.timeline-item .rail::before{
  content:"";position:absolute;top:6px;left:-3px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
}
.timeline-item .content h3{font-size:17px;margin-bottom:10px;font-weight:600;}
.timeline-item .content h3 .kr{display:block;margin-top:5px;font-size:13px;font-weight:400;color:var(--gold);}
.timeline-item .content p{color:var(--text-dim);font-size:14.5px;}
@media(max-width:768px){
  .timeline-item{grid-template-columns:70px 1px 1fr;gap:20px;}
}

/* =========================================================
   Target (사용대상)
========================================================= */
.target-grid{
  margin-top:60px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);
}
.target-card{background:var(--surface);padding:36px;}
.target-card .mark{
  font-family:var(--font-mono);font-size:13px;color:var(--gold);
  letter-spacing:2px;margin-bottom:20px;display:block;
}
.target-card h3{font-size:18px;margin-bottom:12px;font-weight:600;}
.target-card p{color:var(--text-dim);font-size:14.5px;}

/* =========================================================
   FAQ — accordion
========================================================= */
.faq-container{margin-top:56px;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  font-family:var(--font-body);font-size:16px;font-weight:600;
  padding:26px 4px;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;gap:20px;
}
.faq-q .plus{
  font-family:var(--font-mono);color:var(--gold);font-size:18px;
  transition:transform .25s;flex-shrink:0;
}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.faq-a p{color:var(--text-dim);font-size:14.5px;padding:0 4px 26px;max-width:640px;}

/* =========================================================
   Contact
========================================================= */
.contact-grid{margin-top:50px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.contact-card{
  border:1px solid var(--border);padding:44px 60px;text-align:center;
}
.contact-card h3{
  font-family:var(--font-mono);font-size:12px;letter-spacing:2px;
  color:var(--text-faint);text-transform:uppercase;margin-bottom:16px;
}
.contact-card h3 .kr{
  display:block;margin-top:5px;font-size:10px;letter-spacing:1px;
  color:var(--text-faint);text-transform:none;opacity:.75;
}
.email-link{
  font-family:var(--font-mono);font-size:18px;color:var(--gold);
  text-decoration:none;border-bottom:1px solid transparent;
}
.email-link:hover{border-color:var(--gold);}

footer{
  text-align:center;padding:50px 24px;color:var(--text-faint);
  font-size:12.5px;font-family:var(--font-mono);letter-spacing:.5px;
}
footer .kr{
  display:block;margin-top:7px;font-size:10.5px;letter-spacing:.5px;
  font-family:var(--font-body);opacity:.75;
}

/* =========================================================
   Notice box (risk disclosure)
========================================================= */
.notice-box{
  margin-top:48px;padding:28px 32px;border-left:2px solid var(--gold);
  background:var(--surface);
}
.notice-box p{color:var(--text-dim);font-size:14px;line-height:1.8;}

/* =========================================================
   Reveal on scroll
========================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* =========================================================
   Mobile
========================================================= */
@media(max-width:768px){
  section{padding:90px 0;}
  .hero-brand h1{letter-spacing:3px;}
  .hero-quote{white-space:normal;font-size:clamp(18px,4.2vw,26px);}
}