/* nmbti.css */
:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --line:#e8edf7;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#ff5f7a;
  --primary-2:#4fd1c5;
  --soft-pink:#fff2f6;
  --soft-mint:#eefcf9;
  --soft-blue:#eff4ff;
  --danger:#ff5866;
  --warning:#ffb84d;
  --shadow:0 10px 30px rgba(29, 46, 82, 0.08);
  --radius:18px;
}

*{box-sizing:border-box}
.nmbti-wrap{
  max-width: 920px;
  margin: 18px auto 40px;
  padding: 0 14px;
  color: var(--text);
  font-family: "Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  line-height: 1.45;
}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

/* 타이틀 박스 - 너무 크지 않게 */
.nmbti-hero{
  padding: 16px 16px 14px;
  background:
    linear-gradient(120deg, rgba(255,95,122,.10), rgba(79,209,197,.12)),
    #fff;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#b42345;
  background:#fff0f4;
  border:1px solid #ffd5e1;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:8px;
}
.hero-title{
  margin:0;
  font-size: clamp(22px, 2vw, 28px);
  line-height:1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hero-desc{
  margin:8px 0 8px;
  color: var(--muted);
  font-size: 14px;
}
.hero-mini-icons{
  display:flex;
  gap:8px;
  font-size: 16px;
  opacity:.9;
}

/* Intro */
.intro-card{ padding: 16px; }
.notice-19{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,88,102,.10), rgba(255,184,77,.12));
  border: 1px solid #ffd8dd;
  color:#7f1d1d;
  margin-bottom:14px;
  font-size:14px;
}
.notice-19 strong{
  color:#dc2626;
  white-space:nowrap;
}

.intro-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.intro-item{
  display:flex;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fbfdff;
}
.intro-icon{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,95,122,.14), rgba(79,209,197,.14));
  font-size:18px;
  flex-shrink:0;
}
.intro-item h3{
  margin:0 0 4px;
  font-size:14px;
}
.intro-item p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.agree-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#fafafa;
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:12px;
  cursor:pointer;
}
.agree-box input{ margin-top:3px; }
.agree-box span{ font-size:14px; }

.intro-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.intro-foot{
  margin-top:10px;
  color:var(--muted);
}

/* Buttons */
.btn{
  border:none;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight:700;
  cursor:pointer;
  transition: .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
}
.btn:hover{ transform: translateY(-1px); }
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.btn-primary{
  color:#fff;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 20px rgba(255,95,122,.20);
}
.btn-soft{
  color:#374151;
  background:#f3f6fd;
  border:1px solid #e4ebfb;
}
.btn-ico{ font-size:16px; }

.btn-icon{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
  color:#374151;
}
.btn-icon span{ display:none; }

/* Quiz */
.quiz-card{ padding: 14px; }
.quiz-topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.q-progress-label{
  display:flex;
  align-items:center;
  gap:8px;
}
.step-badge{
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 16px rgba(79,209,197,.18);
}
#stepText{ font-size:14px; }

.q-progress-track{
  position:relative;
  height:10px;
  border-radius:999px;
  background:#edf1fb;
  overflow:hidden;
  border:1px solid #e3eaf9;
}
.q-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transition:width .25s ease;
}

.question-wrap{
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff, #fbfcff);
  border-radius:16px;
  padding:16px;
}
.question-category{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:#f4f7ff;
  color:#4b5563;
  border:1px solid #e4ebfb;
}
.question-title{
  margin:10px 0 6px;
  font-size: clamp(18px, 2vw, 24px);
  line-height:1.35;
  letter-spacing:-0.02em;
}
.question-hint{
  margin:0 0 12px;
  font-size:13px;
  color:var(--muted);
}

.choices-box{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.choice-btn{
  width:100%;
  text-align:left;
  border:1.5px solid #dce6fb;
  background:#fff;
  color:#111827;
  border-radius:14px;
  padding:14px 14px;
  cursor:pointer;
  transition:.15s ease;
  position:relative;
}
.choice-btn:hover{
  border-color:#b8cdf8;
  background:#fbfdff;
}
.choice-btn.selected{
  border-color:#6ea9ff;
  background:linear-gradient(180deg, #f5f9ff, #ffffff);
  box-shadow: 0 8px 18px rgba(110,169,255,.12);
}
.choice-btn .choice-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
}
.choice-btn .choice-label{
  font-weight:700;
  color:#374151;
  font-size:13px;
}
.choice-btn .choice-check{
  width:22px; height:22px;
  border-radius:50%;
  border:1.5px solid #c7d6f8;
  display:flex; align-items:center; justify-content:center;
  color:transparent;
  font-size:12px;
  background:#fff;
}
.choice-btn.selected .choice-check{
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color:#fff;
  border-color: transparent;
}
.choice-btn .choice-text{
  font-size:15px;
  line-height:1.5;
}

.quiz-nav{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.quiz-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.tool-btn{
  flex:1 1 120px;
  min-width:120px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.tool-btn span{ font-size:16px; }
.tool-btn em{
  font-style:normal;
  font-size:13px;
  color:#374151;
  font-weight:700;
}
.tool-btn-accent{
  background:linear-gradient(90deg, rgba(255,95,122,.08), rgba(79,209,197,.10));
  border-color:#d8eef0;
}

.share-message-box{
  margin-top:10px;
  border:1px solid #cfe9e5;
  background:linear-gradient(180deg, #f4fffd, #fcfffe);
  border-radius:14px;
  padding:12px 14px;
}
.share-msg-title{
  font-weight:800;
  color:#0f766e;
  margin-bottom:6px;
}
.share-msg-body{
  color:#374151;
  font-size:14px;
  line-height:1.5;
}
.share-msg-url{
  margin-top:8px;
  background:#ecfffb;
  border:1px dashed #99ddd3;
  border-radius:10px;
  padding:8px 10px;
  color:#115e59;
  font-size:12px;
  word-break:break-all;
}

/* Result */
.result-card{
  padding: 16px;
  background:
    radial-gradient(circle at 90% 0%, rgba(79,209,197,.08), transparent 35%),
    radial-gradient(circle at 10% 10%, rgba(255,95,122,.08), transparent 45%),
    #fff;
}
.result-head{
  margin-bottom:12px;
}
.result-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#f4f8ff;
  border:1px solid #e5ecfb;
  color:#4b5563;
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
}
.result-head h2{
  margin:0 0 6px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height:1.25;
  letter-spacing:-0.02em;
}
.result-sub{
  margin:0;
  color:var(--muted);
}

.result-hero{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  border:1px solid var(--line);
  background:#fcfdff;
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}
.result-type-badge{
  min-width:120px;
  text-align:center;
  padding:14px 16px;
  border-radius:16px;
  color:#fff;
  font-size:26px;
  font-weight:900;
  letter-spacing:0.03em;
  background:linear-gradient(120deg, var(--primary), var(--primary-2));
  box-shadow:0 10px 24px rgba(79,209,197,.18);
}
.result-type-meta{
  flex:1;
  min-width:220px;
}
.result-type-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.tag-day{ background:#fff1f5; color:#be123c; border:1px solid #ffd5e1; }
.tag-night{ background:#eefcf9; color:#0f766e; border:1px solid #ccefe9; }

.result-summary-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid #f6d7de;
  background:linear-gradient(180deg, #fff7fa, #fff);
  border-radius:14px;
  padding:12px 14px;
  margin: 12px 0 14px;
}
.summary-icon{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#ffe9ef;
  flex-shrink:0;
}
.result-summary-box p{
  margin:0;
  line-height:1.6;
}
.result-summary-box strong{
  color:#c2185b;
}

/* Score panels */
.score-panels{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.score-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.score-panel h3{
  margin:0 0 10px;
  font-size:15px;
}
.score-row{
  padding:10px;
  border:1px solid #edf1fb;
  border-radius:12px;
  background:#fbfcff;
  margin-bottom:10px;
}
.score-row:last-child{ margin-bottom:0; }
.score-label{
  font-size:13px;
  color:#374151;
  margin-bottom:7px;
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  font-size:12px;
}
.pill-a{ background:#ff6b85; }
.pill-b{ background:#47cdbf; }

.meter{
  height:10px;
  border-radius:999px;
  background:#edf1fb;
  border:1px solid #e4ebfb;
  overflow:hidden;
}
.meter-fill{
  height:100%;
  width:50%;
  border-radius:999px;
  background: linear-gradient(90deg, #ff6b85, #47cdbf);
  transition: width .3s ease;
}
.meter-text{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}

/* Result info cards */
.result-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.info-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.info-card h3{
  margin:0 0 8px;
  font-size:15px;
}
.bullet-list{
  margin:0;
  padding-left: 18px;
}
.bullet-list li{
  margin:4px 0;
  color:#374151;
  line-height:1.5;
}
.bullet-list li strong{
  color:#111827;
}
.bullet-list li .hl{
  color:#c2185b;
  font-weight:700;
}

/* Match panel */
.match-panel{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
  margin-bottom:14px;
}
.match-panel h3{
  margin:0 0 10px;
  font-size:15px;
}
.match-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.match-box{
  border:1px solid #edf1fb;
  border-radius:12px;
  background:#fbfcff;
  padding:10px;
}
.match-label{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  margin-bottom:8px;
}
.match-label.best{ background:#fff0f5; color:#be123c; }
.match-label.good{ background:#effef8; color:#0f766e; }
.match-label.care{ background:#fff7ed; color:#c2410c; }
.match-text{
  font-size:13px;
  color:#374151;
  line-height:1.5;
}

/* Result actions */
.result-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

/* Guide panel */
.guide-panel{
  margin-top:10px;
  border:1px solid #e6ecfa;
  background:linear-gradient(180deg, #f8fbff, #fff);
  border-radius:14px;
  padding:12px 14px;
}
.guide-panel h3{
  margin:0 0 8px;
  font-size:15px;
}
.guide-panel ul{
  margin:0;
  padding-left: 18px;
}
.guide-panel li{
  margin:6px 0;
  color:#4b5563;
  line-height:1.55;
}
.guide-panel .guide-highlight{
  color:#b91c1c;
  font-weight:700;
  background:#fff5f5;
  border:1px solid #ffe0e0;
  border-radius:10px;
  padding:8px 10px;
  list-style-position: inside;
}

/* Footer */
.nmbti-footer{
  text-align:center;
  font-size:12px;
  color:#9aa3b2;
  margin-top:8px;
}

/* Utility highlight for important result phrases */
.result-card .important,
.result-card .emph{
  color:#c2185b;
  font-weight:800;
}

/* Responsive */
@media (max-width: 768px){
  .intro-grid,
  .score-panels,
  .result-grid,
  .match-grid{
    grid-template-columns: 1fr;
  }

  .quiz-topbar{
    grid-template-columns: 1fr;
    gap:8px;
    align-items:stretch;
  }
  .btn-icon{
    justify-content:center;
  }
  .btn-icon span{ display:inline; }

  .question-title{
    font-size: 20px;
  }
  .result-type-badge{
    width:100%;
    min-width:0;
  }
  .result-actions .btn{
    width:100%;
  }
}