/* 도파민대학교 페이지 — v3 시스템 위, 코랄 악센트.
 * 시그니처 = 채팅 → AI 리포트 데모 + 3문항 미니 테스트. */

.dp{ --accent:var(--coral-text); --accent-raw:var(--coral); --accent-bg:var(--coral-bg); }

/* ---------- HERO ---------- */
.dp-hero{border-bottom:1px solid var(--line)}
.dp-hero__inner{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,5vw,60px); align-items:center;
  padding-top:clamp(36px,6vw,72px); padding-bottom:clamp(40px,6vw,76px)}
.dp-logo{height:clamp(28px,3.8vw,40px); width:auto; margin-bottom:20px}
.dp-hero__title{font-size:clamp(1.9rem,4vw,3rem); line-height:1.12}
.dp-hero__title em{font-style:normal; color:var(--coral-text)}
.dp-hero__lead{margin:16px 0 0; color:var(--ink-2); max-width:30ch}
.dp-hero__cta{margin-top:26px}
.dp .btn--solid:hover{background:var(--coral-text)}

/* ---------- 채팅 → 리포트 데모 ---------- */
.dp-chat{width:min(100%,380px); justify-self:center; background:var(--card);
  border:1px solid var(--line-2); border-radius:20px; padding:clamp(15px,2vw,20px);
  box-shadow:0 20px 44px rgba(199,73,43,.09)}
.dp-chat__bar{display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line-2)}
.dp-chat__ava{width:27px; height:27px; border-radius:8px; background:var(--coral); display:grid; place-items:center; flex:none}
.dp-chat__ava img{width:17px; height:17px}
.dp-chat__who{font-weight:600; font-size:13px}
.dp-chat__tag{margin-left:auto; font-size:11.5px; color:var(--coral-text); font-weight:600}
.bub{max-width:82%; padding:10px 14px; border-radius:14px; font-size:13.5px; margin-bottom:9px; line-height:1.45;
  opacity:0; transform:translateY(8px); transition:.35s var(--ease)}
.bub.show{opacity:1; transform:none}
.bub--in{background:var(--paper); border:1px solid var(--line-2); border-bottom-left-radius:5px}
.bub--out{background:var(--coral); color:#fff; margin-left:auto; border-bottom-right-radius:5px}
.typing{display:inline-flex; gap:5px; padding:12px 15px; background:var(--paper); border-radius:14px; border-bottom-left-radius:5px; border:1px solid var(--line-2);
  opacity:0; transform:translateY(8px); transition:.3s}
.typing.show{opacity:1; transform:none}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--coral); animation:dp-blip 1s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes dp-blip{0%,100%{transform:translateY(0); opacity:.4}50%{transform:translateY(-5px); opacity:1}}
.report{margin-top:5px; padding:13px 15px; border-radius:14px; background:#fff; border:1px solid color-mix(in srgb,var(--coral) 42%,transparent);
  opacity:0; transform:translateY(8px); transition:.4s var(--ease)}
.report.show{opacity:1; transform:none}
.report__top{display:flex; align-items:center; gap:10px}
.report__badge{width:27px; height:27px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; flex:none; font-weight:700; font-size:14px}
.report__title{display:block; font-weight:700; font-size:13.5px; color:var(--coral-text)}
.report__sub{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}
.report__bar{margin-top:11px; height:7px; border-radius:99px; background:var(--coral-bg); overflow:hidden}
.report__fill{height:100%; width:74%; background:var(--coral); border-radius:99px}
.report__meta{margin-top:7px; display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:var(--ink-3)}

/* ---------- 에겐-테토 ---------- */
.dp-what{padding:clamp(48px,7vw,88px) 0; border-bottom:1px solid var(--line)}
.dp-what__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,26px); margin-top:8px}
.dp-prof{position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; min-height:320px}
.dp-prof__label{position:absolute; top:14px; left:14px; z-index:2; font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.92); border:1.5px solid color-mix(in srgb,var(--coral) 40%,transparent); color:var(--coral-text)}
.dp-prof__img{margin-top:auto; width:72%; max-width:240px; align-self:center}
.dp-prof__cap{position:absolute; bottom:0; left:0; right:0; padding:14px 16px;
  background:linear-gradient(transparent, rgba(255,255,255,.95) 36%); text-align:center}
.dp-prof__name{font-weight:700; font-size:15px}
.dp-prof__desc{font-size:.88rem; color:var(--ink-2); margin-top:2px}
.dp-what__note{margin-top:clamp(20px,3vw,28px); max-width:52ch; color:var(--ink-2)}

/* ---------- 미니 테스트 ---------- */
.dp-test{padding:clamp(48px,7vw,88px) 0; border-bottom:1px solid var(--line); background:var(--card)}
.dp-test__inner{max-width:620px; margin:0 auto}
.dp-test__head{text-align:center; margin-bottom:clamp(24px,4vw,36px)}
.dp-test__head h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.dp-test__head p{color:var(--ink-2); margin-top:10px}
.quiz__progress{height:6px; border-radius:99px; background:var(--coral-bg); overflow:hidden; margin-bottom:20px}
.quiz__progress i{display:block; height:100%; width:0; background:var(--coral); border-radius:99px; transition:width .4s var(--ease)}
.quiz__q{font-weight:700; font-size:clamp(1.1rem,2vw,1.4rem); letter-spacing:-.02em; text-align:center; min-height:2.4em; display:flex; align-items:center; justify-content:center}
.quiz__opts{display:grid; gap:11px; margin-top:20px}
.quiz__opt{text-align:left; padding:15px 17px; border-radius:13px; border:1.5px solid var(--line); background:var(--paper); font-size:.98rem; font-weight:500;
  transition:border-color .18s, transform .15s var(--ease)}
.quiz__opt:hover{border-color:var(--coral); transform:translateY(-2px)}
.quiz__step{font-size:12.5px; font-weight:600; color:var(--coral-text); text-align:center; margin-top:15px}
.quiz__result{text-align:center; display:none}
.quiz__result.show{display:block; animation:dp-pop .5s var(--ease)}
@keyframes dp-pop{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.quiz__result-img{width:140px; height:180px; object-fit:cover; object-position:top center; margin:0 auto; border-radius:15px; background:var(--paper); border:1px solid var(--line)}
.quiz__result h3{font-size:clamp(1.4rem,2.4vw,1.8rem); margin:16px 0 0}
.quiz__result h3 em{font-style:normal; color:var(--coral-text)}
.quiz__spectrum{margin:18px auto 0; max-width:320px}
.quiz__spectrum-bar{height:11px; border-radius:99px; background:linear-gradient(90deg,#F5B93E,var(--coral)); position:relative}
.quiz__spectrum-bar i{position:absolute; top:50%; left:50%; width:21px; height:21px; border-radius:50%; background:#fff; border:3px solid var(--coral-text); transform:translate(-50%,-50%); transition:left .6s var(--ease)}
.quiz__spectrum-ends{display:flex; justify-content:space-between; margin-top:7px; font-size:12px; font-weight:600; color:var(--ink-3)}
.quiz__result p{color:var(--ink-2); margin:14px auto 0; max-width:36ch}
.quiz__result-cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center}
.quiz__retry{font-size:13px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}
.quiz__retry:hover{color:var(--ink)}

/* ---------- 플랫폼 ---------- */
.dp-platform{padding:clamp(48px,7vw,88px) 0}
.dp-platform__lead{font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.3; max-width:20ch}
.dp-platform__lead em{font-style:normal; color:var(--coral-text)}
.dp-platform__p{margin-top:18px; color:var(--ink-2); max-width:48ch}

/* ---------- CTA ---------- */
.dp-cta{border-top:1px solid var(--line); text-align:center; padding:clamp(46px,7vw,84px) 0}
.dp-cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem); max-width:22ch; margin:0 auto 10px}
.dp-cta p{color:var(--ink-2); margin:0 auto 24px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .dp-hero__inner{grid-template-columns:1fr; gap:30px}
  .dp-hero__copy{order:1} .dp-hero__stage{order:2; justify-self:center}
}
@media (max-width:560px){
  .dp-what__grid{grid-template-columns:1fr}
}