:root{
  --start-bg:#07111f;
  --start-card:#0d1a2b;
  --start-panel:#10243a;
  --start-line:#203955;
  --start-text:#eef5ff;
  --start-muted:#9ab0c7;
  --start-blue:#76c7ff;
  --start-green:#64d6aa;
  --start-orange:#f5b864;
  --start-border:#294866;
}
.start-dashboard{padding:10px 0 42px}
.start-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}
.start-profile-card,.start-stat-card,.start-dict-box,.style-guide-card,.start-unified-card{
  border:1px solid var(--start-line);background:linear-gradient(180deg,#0d1a2b,#0a1828);border-radius:20px
}
.start-profile-card{padding:25px;min-height:300px;display:flex;flex-direction:column}

/* --- "나는 어떤 투자자인가": KNOWLEDGE / RISK STYLE / 오른쪽 영역, 3열 그리드 카드 --- */
.start-style-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.start-style-mini{min-height:250px;padding:18px 18px 16px;border:1px solid #203955;border-radius:20px;background:linear-gradient(180deg,#0b1a2b,#091523);box-shadow:0 10px 30px rgba(0,0,0,.16);display:flex;flex-direction:column;align-items:flex-start}
.start-style-mini .tag{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;border:1px solid var(--start-border);background:#0d1a2b;color:var(--start-blue);font-size:10px;font-weight:950;letter-spacing:.1em;flex:0 0 auto}
.start-style-mini h4{margin:10px 0 10px;font-size:24px;font-weight:800;letter-spacing:-.03em;color:#fff;flex:0 0 auto}
.start-style-mini p,.start-style-action-desc{margin:0 0 10px;color:var(--start-muted);font-size:14px;line-height:1.75}
/* 카드 설명 문구는 진단 여부와 상관없이 항상 표시 */
/* 오른쪽 영역: mini 카드와 동일한 그리드 셀 하나를 그대로 사용 */
.start-style-action{min-height:250px}
.start-style-action-top{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.start-style-action-result{margin:0;display:none;color:#fff;font-size:15px;font-weight:500;line-height:1.5}
/* 진단 전: 설명 문구 표시 / 진단 후: 결과 요약 표시 */
.start-dashboard.is-diagnosed .start-style-action-desc{display:none}
.start-dashboard.is-diagnosed .start-style-action-result{display:block}
.start-style-action button{margin-top:auto;align-self:flex-start;border:1px solid var(--start-border);border-radius:12px;background:#10243a;color:#e6f1fa;font-weight:900;min-height:44px;padding:0 15px;font-size:13px;cursor:pointer}
.start-style-action button:hover{border-color:#5d94bd;background:#173754}
.start-style-action .primary{background:#16314e;border-color:#4f83aa;color:#fff;box-shadow:0 0 0 4px rgba(118,199,255,.1)}

/* 칩: 기본은 무채색, 진단 결과와 일치하는 칩만 파란색으로 켜짐 */
.style-labels{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.style-labels span{padding:8px 11px;font-size:11px;border:1px solid var(--start-border);border-radius:999px;background:#091827;color:#a7c0d5;font-weight:850}
.style-labels span.active{border-color:#378ade;background:#15406b;color:#dceaf6;font-weight:850}

.start-dashboard.is-diagnosed .start-style-mini{padding:12px 14px}

.start-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.start-profile-kicker{color:var(--start-blue);font-size:10px;font-weight:950;letter-spacing:.14em}
.start-profile-card h2{margin:8px 0 8px;font-size:28px;letter-spacing:-.04em}
.start-profile-card p{margin:0;color:var(--start-muted);font-size:13px;line-height:1.7;max-width:680px}
.start-local-badge{flex:0 0 auto;padding:7px 9px;border-radius:999px;border:1px solid var(--start-border);background:#10243a;color:#9fc7e4;font-size:10px;font-weight:900}
.start-result-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.start-result-badge{padding:9px 12px;border-radius:12px;border:1px solid var(--start-border);background:#081827;color:#d7e7f4;font-size:12px;font-weight:900}
.start-result-badge strong{color:var(--start-blue);margin-left:5px}
.start-profile-actions{display:flex;gap:8px;flex-wrap:wrap}
.start-profile-actions button,.quiz-actions button,.style-cta,.start-dict-search button{
  border:1px solid var(--start-border);border-radius:11px;background:#10243a;color:#e6f1fa;font-weight:900
}
.start-profile-actions button{min-height:42px;padding:0 14px;font-size:12px}
.start-profile-actions .primary,.quiz-actions .primary,.style-cta{background:#16314e;border-color:#4f83aa;color:#fff}
.start-profile-actions button:hover,.quiz-actions button:hover,.style-cta:hover{border-color:#5d94bd;background:#173754}
.start-side{display:grid;grid-template-columns:1fr;gap:10px}
.start-stat-card{padding:18px}
.start-stat-label{color:#7894ab;font-size:10px;font-weight:900;letter-spacing:.08em}
.start-stat-value{margin-top:8px;color:#fff;font-size:22px;font-weight:950;letter-spacing:-.03em}
.start-stat-sub{margin-top:5px;color:var(--start-muted);font-size:11px;line-height:1.55}
.start-recent-terms{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.start-recent-terms a,.start-recent-terms span,body.hanpan-dark .start-recent-terms a{padding:8px 10px;min-height:32px;display:inline-flex;align-items:center;border:1px solid var(--start-border);border-radius:8px;background:#091827;color:#a9c8df;font-size:11px;text-decoration:none}
.start-dashboard-note{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(36,57,85,.9);color:#8ba2b8;font-size:11px;line-height:1.8}
.style-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.style-guide-card{padding:20px}
.style-guide-card .tag{color:var(--start-blue);font-size:10px;font-weight:950;letter-spacing:.11em}
.style-guide-card h3{margin:9px 0 8px;font-size:20px}
.style-guide-card p{margin:0;color:var(--start-muted);font-size:12px;line-height:1.7}
.style-labels{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.style-labels span{padding:6px 8px;border:1px solid var(--start-border);border-radius:999px;background:#091827;color:#a7c0d5;font-size:10px;font-weight:850}
.style-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;font-size:12px;cursor:pointer}
.start-dict-box{padding:24px}
.start-dict-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:17px}
.start-dict-top h3{margin:0 0 5px;font-size:23px;letter-spacing:-.035em}
.start-dict-top p{margin:0;color:var(--start-muted);font-size:12px;line-height:1.6}
.start-dict-top a,body.hanpan-dark .start-dict-top a{color:var(--start-blue);font-size:11px;font-weight:900;text-decoration:none;white-space:nowrap}
.start-dict-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}.start-dict-tabs::-webkit-scrollbar{display:none}
.start-dict-tabs span{flex:0 0 auto;padding:7px 10px;border-radius:999px;border:1px solid var(--start-line);background:#091827;color:#8fa9bf;font-size:10px;font-weight:850}
.start-dict-search{display:flex;max-width:820px;border:1px solid #315575;border-radius:13px;overflow:hidden;background:#081523}
.start-dict-search:focus-within{border-color:var(--start-blue)}
.start-dict-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:15px 16px;font-size:16px}
.start-dict-search input::placeholder{color:#6e869c}
.start-dict-search button{width:58px;border:0;border-radius:0;color:var(--start-blue);font-size:21px}
.start-dict-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.start-dict-quick button{border:1px solid var(--start-border);background:#10243a;color:#b8d0e3;padding:10px 13px;min-height:38px;border-radius:9px;font-size:11px;cursor:pointer}
.start-dict-quick button:hover{border-color:#4f83aa;color:#fff}
.quiz-modal[hidden]{display:none}.quiz-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;background:rgba(2,8,15,.86)}
.quiz-panel{width:min(760px,100%);max-height:min(860px,92vh);overflow:auto;border:1px solid var(--start-border);border-radius:22px;background:#081523;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.quiz-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px;border-bottom:1px solid var(--start-line);background:#081523}
.quiz-step{color:var(--start-blue);font-size:10px;font-weight:950;letter-spacing:.13em}.quiz-head h2{margin:6px 0 0;font-size:23px}.quiz-close{width:44px;height:44px;border:1px solid var(--start-border);border-radius:10px;background:#10243a;color:#fff;font-size:20px;cursor:pointer}
.quiz-body{padding:20px 22px}.quiz-note{margin:0 0 18px;color:#8ea8be;font-size:11px;line-height:1.65}
.quiz-question{padding:17px 0;border-bottom:1px solid #183048}.quiz-question:first-of-type{padding-top:0}.quiz-question:last-of-type{border-bottom:0}
.quiz-question h3{margin:0 0 11px;font-size:14px;line-height:1.55}.quiz-options{display:grid;gap:7px}.quiz-option{position:relative;display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border:1px solid #203955;border-radius:11px;background:#0b1b2c;color:#b8ccdc;font-size:12px;line-height:1.55;cursor:pointer}.quiz-option:hover{border-color:#3f6688}.quiz-option input{margin-top:2px;accent-color:#76c7ff}.quiz-option:has(input:checked){border-color:#4f83aa;background:#10243a;color:#fff}
.quiz-error{min-height:20px;margin-top:10px;color:#ff9b9b;font-size:11px}.quiz-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 22px 22px}.quiz-actions button{min-height:40px;padding:0 14px;font-size:11px;cursor:pointer}
.quiz-result{text-align:center;padding:20px 0 4px}.quiz-result-label{color:var(--start-blue);font-size:10px;font-weight:950;letter-spacing:.14em}.quiz-result h3{margin:8px 0 8px;font-size:30px;letter-spacing:-.04em}.quiz-result p{max-width:560px;margin:0 auto;color:#9ab0c7;font-size:13px;line-height:1.75}.quiz-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0}.quiz-result-card{padding:17px;border:1px solid var(--start-border);border-radius:15px;background:#0d1a2b}.quiz-result-card span{display:block;color:#7894ab;font-size:10px}.quiz-result-card strong{display:block;margin-top:6px;font-size:20px;color:#fff}
@media(max-width:860px){.start-dashboard-grid{grid-template-columns:1fr}.start-side{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.style-intro{grid-template-columns:1fr}.start-side{grid-template-columns:1fr 1fr}.start-side .start-stat-card:last-child{grid-column:1/-1}.start-profile-card{min-height:270px}.start-dict-top{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.start-dashboard{padding-top:4px}.start-profile-card{padding:18px;border-radius:17px}.start-profile-top{display:block}.start-local-badge{display:inline-flex;margin-top:13px}.start-profile-card h2{font-size:23px}.start-side{grid-template-columns:1fr 1fr}.start-stat-card{padding:14px}.start-stat-value{font-size:18px}.start-dict-box{padding:17px;border-radius:17px}.start-dict-tabs{margin-left:-2px}.quiz-modal{padding:0}.quiz-panel{max-height:100vh;height:100vh;border-radius:0;border-left:0;border-right:0}.quiz-head{padding:16px}.quiz-body{padding:17px 16px}.quiz-actions{padding:0 16px 18px}.quiz-result-grid{grid-template-columns:1fr}.start-style-mini{padding:14px}}


/* ===== WHY INVEST REDESIGN ===== */
.why-invest-shell{padding:0 0 30px;background:
  radial-gradient(circle at top right, rgba(84,154,255,.16), transparent 36%),
  radial-gradient(circle at top left, rgba(69,224,177,.10), transparent 28%),
  linear-gradient(180deg, rgba(8,17,31,.96), rgba(7,17,31,1));}
.why-invest-wrap{display:grid;gap:22px}
.why-stage{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.panel-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--start-blue);font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.panel-kicker::before{content:'';width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg, #76c7ff, #40a2ff);box-shadow:0 0 16px rgba(118,199,255,.45)}
.why-stage strong{color:#eef5ff;font-weight:800}
.why-story-grid{display:grid;gap:18px}
.why-panel{border:1px solid rgba(36,57,85,.98);border-radius:26px;background:linear-gradient(180deg, rgba(13,26,43,.95), rgba(8,20,33,.98));box-shadow:0 18px 50px rgba(0,0,0,.16)}
.why-panel-feature{padding:26px 28px}
.feature-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:22px;align-items:start}
.why-panel-feature h2,.panel-top h2,.why-panel-bridge h2{margin:10px 0 12px;font-size:clamp(29px,4vw,44px);line-height:1.18;letter-spacing:-.045em;color:#fff}
.why-panel-feature p,.panel-top p,.why-panel-bridge p{margin:0;color:#9eb4c8;font-size:14px;line-height:1.8}
.feature-points{display:grid;gap:12px}
.feature-point{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;border:1px solid rgba(46,73,103,.9);background:rgba(255,255,255,.02)}
.feature-point span{flex:0 0 auto;width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(118,199,255,.12);color:#d6ecff;font-weight:900;font-size:12px}
.feature-point strong{display:block;color:#fff;font-size:15px;margin-bottom:3px}.feature-point p{margin:0;color:#94abc1;font-size:13px;line-height:1.65}
.why-panel-compare,.why-panel-roles,.why-panel-balance,.why-panel-bridge{padding:24px 28px}
.panel-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.panel-top.compact{margin-bottom:18px}.panel-top>p{max-width:360px}.panel-top h2 span{color:#b8e2ff}
.compare-axis{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:18px;color:#87a0b8;font-size:12px;font-weight:700}
.compare-line{height:2px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(118,199,255,.95));position:relative}
.compare-line::after{content:'';position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:10px;height:10px;border-radius:50%;background:#76c7ff;box-shadow:0 0 18px rgba(118,199,255,.55)}
.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.compare-card{position:relative;padding:18px;border-radius:20px;border:1px solid rgba(38,60,87,.95);background:linear-gradient(180deg, rgba(9,24,39,.92), rgba(12,26,44,.98));display:flex;flex-direction:column;min-height:255px}
.compare-card::before{content:'';position:absolute;left:18px;top:18px;width:38px;height:4px;border-radius:999px;background:rgba(255,255,255,.08)}
.compare-cash::before{background:#8fb1ce}.compare-deposit::before{background:var(--start-green)}.compare-saving::before{background:#f6c773}.compare-invest::before{background:#76c7ff}
.compare-chip{display:inline-flex;align-self:flex-start;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(57,82,109,.95);color:#b7cbe0;font-size:10px;font-weight:900;letter-spacing:.12em}
.compare-card h3{margin:14px 0 6px;color:#fff;font-size:24px;letter-spacing:-.03em}.compare-role{margin:0 0 12px;color:#b1c4d8;font-size:13px;font-weight:700}.compare-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.compare-card li{position:relative;padding-left:16px;color:#92a8bc;font-size:13px;line-height:1.65}.compare-card li::before{content:'';position:absolute;left:0;top:.65em;width:7px;height:7px;border-radius:50%;background:#3f7cb1}
.role-lane{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}.role-lane::before{content:'';position:absolute;left:10%;right:10%;top:18px;height:1px;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(118,199,255,.5), rgba(255,255,255,.06))}
.role-card{position:relative;padding:34px 18px 18px;border-radius:20px;border:1px solid rgba(38,60,87,.95);background:rgba(255,255,255,.02)}
.role-card-accent{background:linear-gradient(180deg, rgba(18,52,86,.48), rgba(12,29,48,.9));border-color:rgba(84,138,181,.95)}
.role-index{position:absolute;top:0;left:18px;transform:translateY(-50%);padding:8px 10px;border-radius:999px;background:#0f2439;border:1px solid rgba(84,138,181,.9);color:#c7e8ff;font-size:11px;font-weight:900;letter-spacing:.08em}
.role-card h3{margin:0 0 10px;color:#fff;font-size:22px;letter-spacing:-.03em}.role-card p{margin:0;color:#94abc0;font-size:14px;line-height:1.8}.role-card strong{color:#e7f3ff}
.balance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.balance-box{padding:18px;border-radius:20px;border:1px solid rgba(38,60,87,.95)}
.balance-box.positive{background:linear-gradient(180deg, rgba(10,31,49,.9), rgba(12,34,53,.85))}.balance-box.caution{background:linear-gradient(180deg, rgba(38,22,19,.55), rgba(25,18,24,.88));border-color:rgba(106,74,82,.95)}
.balance-box h3{margin:0 0 12px;color:#fff;font-size:18px}.balance-box ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}.balance-box li{position:relative;padding-left:18px;color:#9bb1c5;font-size:14px;line-height:1.7}.balance-box li::before{content:'';position:absolute;left:0;top:.66em;width:8px;height:8px;border-radius:50%;background:#76c7ff}.balance-box.caution li::before{background:#f39d6d}
.balance-summary{margin-top:16px;padding:16px 18px;border-radius:16px;background:rgba(118,199,255,.06);border:1px solid rgba(83,128,164,.36);color:#bdd2e5;font-size:14px;line-height:1.8}.balance-summary strong{color:#fff}
.why-panel-bridge{text-align:center;background:linear-gradient(180deg, rgba(13,26,43,.92), rgba(14,35,58,.98))}.why-panel-bridge h2 span{color:#76c7ff}.bridge-link,body.hanpan-dark .bridge-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;margin-top:18px;border-radius:14px;border:1px solid rgba(84,138,181,.95);background:linear-gradient(180deg, rgba(20,50,80,.95), rgba(15,37,60,.95));color:#fff;text-decoration:none;font-weight:900;box-shadow:0 0 0 4px rgba(118,199,255,.08)}
.bridge-link:hover{background:linear-gradient(180deg, rgba(27,61,95,.95), rgba(19,45,72,.95))}

/* dashboard polish */
.start-dashboard .flow-block-head{margin-bottom:18px}
.start-dashboard .flow-block-head h2{font-size:clamp(28px,3.3vw,40px);letter-spacing:-.04em}
.start-dashboard .flow-block-head p{max-width:720px;color:#98afc5}

@media(max-width:1100px){
  .feature-layout{grid-template-columns:1fr}
  .panel-top{flex-direction:column;align-items:flex-start}
  .panel-top>p{max-width:none}
  .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-lane{grid-template-columns:1fr}
  .role-lane::before{display:none}
}
@media(max-width:860px){
  .why-panel-feature,.why-panel-compare,.why-panel-roles,.why-panel-balance,.why-panel-bridge{padding:20px}
  .balance-grid,.start-style-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .why-invest-shell{padding-top:10px}
  .why-panel-feature h2,.panel-top h2,.why-panel-bridge h2{font-size:25px}
  .compare-axis{grid-template-columns:1fr;gap:8px}
  .compare-grid{grid-template-columns:1fr}
  .compare-card{min-height:auto}
  .feature-point,.balance-summary{padding:14px}
  .start-style-mini{min-height:auto}
}

.why-stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.why-prestart-link{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border-radius:999px;border:1px solid rgba(67,99,130,.65);background:rgba(255,255,255,.025);color:#91abc1!important;font-size:11px;font-weight:850;text-decoration:none;white-space:nowrap}.why-prestart-link:hover{border-color:#5d94bd;color:#e7f4ff!important;background:rgba(118,199,255,.07)}@media(max-width:560px){.why-stage-top{align-items:flex-start;flex-direction:column}.why-prestart-link{margin-top:2px}}