@charset "utf-8";

/* =========================
   ZZOA Love MBTI Test Style
   ========================= */

:root{
  --pink-50:#fff6fb;
  --pink-100:#ffe8f3;
  --pink-200:#ffd2e8;
  --pink-300:#ffb4d7;
  --pink-400:#ff8fc4;
  --pink-500:#ff6aac;
  --pink-600:#ef4f99;
  --pink-700:#d83d84;

  --violet-100:#f4efff;
  --violet-500:#7a5cff;

  --mint-500:#18c4a9;
  --mint-600:#13ae95;

  --blue-500:#4a8cff;
  --amber-500:#ffb020;
  --danger:#ef4444;
  --success:#16a34a;

  --text-1:#1f2937;
  --text-2:#4b5563;
  --text-3:#6b7280;
  --line:#f1d0e2;
  --card:#ffffff;
  --bg:#fffafd;
  --shadow:0 10px 28px rgba(233, 103, 164, .12);
  --shadow-sm:0 6px 14px rgba(233, 103, 164, .08);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
}

#zzoa-lmbti-wrap.zzoa-lmbti{
  background:
    radial-gradient(circle at 10% -10%, rgba(255,106,172,.12), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(255,179,215,.18), transparent 40%),
    linear-gradient(180deg, #fffbfd 0%, #fff7fb 100%);
  padding: 18px 0 28px;
  color: var(--text-1);
}

.zzoa-lmbti *{
  box-sizing:border-box;
}

.zzoa-lmbti .lmbti-container{
  width:min(100%, 920px);
  margin:0 auto;
  padding:0 14px;
}

/* ===== 타이틀 박스 ===== */
.lmbti-title-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(135deg, #ff71b2 0%, #f65ea5 45%, #f19cc8 100%);
  color:#fff;
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom:14px;
}

.title-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.title-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  font-size:22px;
  flex:0 0 auto;
}

.title-texts{
  min-width:0;
}

.title-texts h1{
  margin:0;
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-0.02em;
}

.title-texts p{
  margin:4px 0 0;
  font-size:12.5px;
  line-height:1.35;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.title-badges{
  display:flex;
  align-items:center;
  gap:6px;
}

.mini-icon-btn{
  border:none;
  background:rgba(255,255,255,.18);
  color:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
  transition:transform .15s ease, background-color .15s ease;
}
.mini-icon-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.26); }

/* ===== 공통 카드 ===== */
.lmbti-card{
  background:var(--card);
  border:1px solid #f8ddea;
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow);
  padding:18px;
  margin-bottom:14px;
}

.is-hidden{
  display:none !important;
}

/* ===== 시작 카드 ===== */
.start-card .hero-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.hero-icon{
  width:56px; height:56px;
  flex:0 0 auto;
  border-radius:16px;
  display:grid; place-items:center;
  font-size:28px;
  background:linear-gradient(135deg, #ffe4f1, #ffd3e8);
  border:1px solid #f6c7de;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.hero-copy h2{
  margin:0 0 6px;
  font-size:20px;
  line-height:1.35;
  letter-spacing:-0.02em;
}

.hero-copy p{
  margin:0;
  color:var(--text-2);
  line-height:1.6;
  font-size:14px;
}
.hero-copy strong{
  color:var(--pink-700);
  font-weight:700;
}

.name-form{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg, #fffafe 0%, #fff6fb 100%);
  border:1px solid #f8deeb;
}

.input-label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  font-size:13px;
  color:var(--text-2);
}

.input-row{
  display:flex;
  gap:10px;
}

.input-row input{
  flex:1;
  min-width:0;
  height:46px;
  border:1px solid #f0c9dd;
  border-radius:12px;
  padding:0 14px;
  font-size:14px;
  outline:none;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-row input:focus{
  border-color:var(--pink-500);
  box-shadow:0 0 0 4px rgba(255,106,172,.12);
}

.input-help{
  margin:8px 2px 0;
  color:var(--text-3);
  font-size:12px;
}

.feature-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.feature-item{
  border:1px solid #f4d8e6;
  border-radius:14px;
  padding:10px 8px;
  background:#fff;
  text-align:center;
}
.feature-item span{
  display:block; font-size:18px; margin-bottom:6px;
}
.feature-item em{
  display:block; font-style:normal; font-weight:700; font-size:13px;
}
.feature-item small{
  color:var(--text-3); font-size:11px;
}

/* ===== 버튼 ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:none;
  border-radius:12px;
  height:46px;
  padding:0 14px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:disabled{
  opacity:.45; cursor:not-allowed; transform:none !important;
}
.btn-ico{ font-size:14px; }

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #ff70b2, #f05ba3);
  box-shadow:0 8px 20px rgba(240, 91, 163, .26);
}
.btn-secondary{
  color:#fff;
  background:linear-gradient(135deg, #ff89bf, #f26ea9);
}
.btn-ghost{
  color:var(--text-2);
  background:#fff;
  border:1px solid #ecd3e0;
}

/* ===== 퀴즈 ===== */
.quiz-card{ padding:16px; }

.quiz-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.quiz-progress-wrap{
  flex:1;
  min-width:0;
}

.progress-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  font-size:12px;
  color:var(--text-2);
}
.progress-meta #progressText{ font-weight:700; color:var(--pink-700); }
.progress-meta #dimensionHint{ color:var(--text-3); }

.progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#f6d6e6;
  overflow:hidden;
  border:1px solid #f1c4da;
}
.progress-fill{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, #ff6aac, #f3a2ca);
  transition:width .25s ease;
}

.quiz-tools{
  display:flex;
  gap:8px;
}
.icon-tool{
  border:1px solid #efd8e4;
  background:#fff;
  color:var(--text-2);
  border-radius:12px;
  height:40px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
}
.icon-tool:hover{
  background:#fff8fc;
}

.question-box{
  border:1px solid #f5dceb;
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, #fff 0%, #fffafd 100%);
}

.q-number{
  width:44px; height:44px;
  margin:0 auto 10px;
  border-radius:50%;
  display:grid; place-items:center;
  font-weight:800; color:#fff;
  background:linear-gradient(135deg, #ff87bf, #f063a8);
  box-shadow:0 8px 18px rgba(240,99,168,.25);
}

.question-box h3{
  margin:0;
  text-align:center;
  font-size:22px;
  line-height:1.45;
  letter-spacing:-0.02em;
}

.q-desc{
  margin:6px 0 14px;
  text-align:center;
  color:var(--text-3);
  font-size:13px;
}

.answer-list{
  display:grid;
  gap:10px;
}

.answer-btn{
  width:100%;
  border:1px solid #efcfe1;
  background:#fff;
  border-radius:14px;
  padding:12px;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.answer-btn:hover{
  border-color:#eeb0cf;
  box-shadow:0 8px 18px rgba(240, 99, 168, .08);
  transform:translateY(-1px);
}
.answer-btn.selected{
  border-color:var(--pink-500);
  background:linear-gradient(180deg, #fff8fc, #fff1f8);
  box-shadow:0 10px 22px rgba(240, 99, 168, .10);
}

.answer-btn .answer-inner{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.answer-badge{
  width:28px; height:28px; flex:0 0 auto;
  border-radius:8px;
  display:grid; place-items:center;
  font-weight:800; color:#fff;
  font-size:13px;
  background:linear-gradient(135deg, #ff8fc4, #f05da3);
}

.answer-content{
  min-width:0;
}
.answer-content .answer-title{
  font-weight:700;
  color:var(--text-1);
  line-height:1.45;
  font-size:15px;
}
.answer-content .answer-sub{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.4;
}

.quiz-nav{
  margin-top:14px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
}
.quiz-nav-center{
  min-width:0;
  text-align:center;
}
.answer-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:6px 10px;
  border-radius:999px;
  background:#fff7fb;
  border:1px solid #f3d8e6;
  color:var(--text-2);
  font-size:12.5px;
  text-align:center;
}

/* ===== 계산/결과 영역 ===== */
.result-zone{
  padding:16px;
  background:linear-gradient(180deg, #fffdfd 0%, #fff9fc 100%);
}

.calc-box{
  border:1px dashed #efbdd7;
  background:#fff;
  border-radius:16px;
  padding:16px;
  text-align:center;
  margin-bottom:14px;
}
.calc-emoji{
  font-size:30px;
  margin-bottom:8px;
}
.calc-box h3{
  margin:0;
  font-size:20px;
  line-height:1.4;
  letter-spacing:-0.02em;
}
.calc-box h3 span{
  color:var(--pink-700);
}
.calc-box p{
  margin:8px 0 12px;
  color:var(--text-2);
  font-size:13px;
}
.calc-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#f8dceb;
  overflow:hidden;
}
.calc-bar-fill{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, #ff6aac, #ffa8cf);
  transition:width .4s ease;
}

.result-box{
  display:grid;
  gap:14px;
}

/* 결과 헤더 */
.result-hero{
  border:1px solid #f3d8e7;
  border-radius:18px;
  background:#fff;
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.result-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.result-person{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.result-avatar{
  width:58px; height:58px;
  border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, #ffe3f1, #ffd2e8);
  border:1px solid #f4c5dd;
  font-size:28px;
  flex:0 0 auto;
}
.result-person-text{
  min-width:0;
}
.result-person-text h3{
  margin:0;
  font-size:16px;
  line-height:1.35;
  color:var(--text-2);
}
.result-type-line{
  margin-top:3px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.result-type-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  font-size:14px;
  background:linear-gradient(135deg, #ff77b6, #ee5ca4);
}
.result-mbti-code{
  display:inline-block;
  font-weight:900;
  color:var(--pink-700);
  font-size:15px;
  letter-spacing:.04em;
}

.result-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.action-btn{
  height:38px;
  border-radius:10px;
  border:1px solid #eed4e2;
  background:#fff;
  color:var(--text-2);
  padding:0 10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.action-btn.primary{
  color:#fff;
  border:none;
  background:linear-gradient(135deg, #ff7db9, #f061a8);
  box-shadow:0 6px 16px rgba(240,97,168,.22);
}
.action-btn:hover{ transform:translateY(-1px); }

.result-summary{
  margin-top:12px;
  background:linear-gradient(180deg, #fffafe 0%, #fff5fb 100%);
  border:1px solid #f4d8e7;
  border-radius:14px;
  padding:12px;
}
.result-summary p{
  margin:0;
  line-height:1.7;
  color:var(--text-2);
  font-size:14px;
}
.result-summary .highlight{
  color:var(--pink-700);
  font-weight:700;
}
.result-summary .important{
  color:#b42318;
  background:#fff0f0;
  border:1px solid #ffd6d6;
  padding:1px 6px;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}

/* 공유 복사 메시지 */
.share-msg{
  margin-top:10px;
  display:none;
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.55;
  border:1px solid #bfe9dc;
  background:#effcf7;
  color:#0f766e;
}
.share-msg.show{ display:block; }

/* 점수/지표 카드 */
.result-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}
.panel{
  border:1px solid #f4d9e8;
  border-radius:16px;
  background:#fff;
  padding:14px;
}
.panel h4{
  margin:0 0 10px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
}

.metric-list{
  display:grid;
  gap:10px;
}
.metric-item{
  display:grid;
  grid-template-columns:84px 1fr 36px;
  align-items:center;
  gap:8px;
}
.metric-label{
  color:var(--text-2);
  font-weight:700;
  font-size:13px;
}
.metric-bar{
  height:10px;
  background:#f6dfeb;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #f0cfe0;
}
.metric-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  transition:width .45s ease;
}
.metric-item[data-color="pink"] .metric-bar-fill{ background:linear-gradient(90deg, #ff78b7, #f5a1cb); }
.metric-item[data-color="mint"] .metric-bar-fill{ background:linear-gradient(90deg, #20c5ac, #7be7d8); }
.metric-item[data-color="violet"] .metric-bar-fill{ background:linear-gradient(90deg, #8a72ff, #beaefc); }
.metric-item[data-color="amber"] .metric-bar-fill{ background:linear-gradient(90deg, #ffb733, #ffd67a); }
.metric-value{
  text-align:right;
  font-weight:800;
  color:var(--text-2);
  font-size:12px;
}

.dimension-box{
  display:grid;
  gap:8px;
}
.dim-row{
  border:1px solid #f4deea;
  border-radius:12px;
  padding:10px;
  background:#fffafd;
}
.dim-row .dim-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}
.dim-balance{
  height:8px;
  background:#f8ddeb;
  border-radius:999px;
  overflow:hidden;
}
.dim-left-right{
  display:flex;
  height:100%;
}
.dim-left,
.dim-right{
  height:100%;
}
.dim-left{ background:linear-gradient(90deg, #ff76b6, #f5a4cc); }
.dim-right{ background:linear-gradient(90deg, #cfa8ff, #8f74ff); }

/* 설명/포인트 카드 */
.result-sections{
  display:grid;
  gap:14px;
}
.section-card{
  border:1px solid #f4d9e8;
  border-radius:16px;
  background:#fff;
  padding:14px;
}
.section-card h4{
  margin:0 0 10px;
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.tag-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid #efd7e5;
  background:#fff8fc;
  color:var(--text-2);
}
.tag-chip.good{
  background:#effcf7;
  border-color:#c3eadf;
  color:#0f766e;
}
.tag-chip.warn{
  background:#fff2f6;
  border-color:#f7c8da;
  color:#be185d;
}

.list-check,
.list-tip{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.list-check li,
.list-tip li{
  border-radius:12px;
  background:#fffafd;
  border:1px solid #f5deeb;
  padding:10px 12px;
  color:var(--text-2);
  line-height:1.55;
  font-size:13.5px;
}
.list-check li strong,
.list-tip li strong{
  color:var(--text-1);
}
.list-check li::before{
  content:"✓";
  display:inline-block;
  margin-right:8px;
  color:var(--pink-600);
  font-weight:800;
}
.list-tip li::before{
  content:"💡";
  display:inline-block;
  margin-right:8px;
}

/* 궁합 박스 */
.compat-box{
  display:grid;
  gap:10px;
}
.compat-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:10px;
  align-items:center;
  border-radius:12px;
  padding:10px;
  border:1px solid #f0d6e4;
  background:#fff;
}
.compat-row.good{
  background:linear-gradient(90deg, #effcf7, #f7fffc);
  border-color:#caefe3;
}
.compat-row.warn{
  background:linear-gradient(90deg, #fff4f8, #fffafd);
  border-color:#f7cfe0;
}
.compat-label{
  font-weight:800;
  font-size:13px;
  text-align:center;
  border-radius:10px;
  padding:8px 10px;
}
.compat-row.good .compat-label{
  color:#0f766e;
  background:#dff7f1;
}
.compat-row.warn .compat-label{
  color:#be185d;
  background:#ffe1ec;
}
.compat-content{
  color:var(--text-2);
  font-size:13px;
  line-height:1.5;
}
.compat-content strong{
  color:var(--text-1);
}

/* 가이드/하단 문구 */
.result-footer-guide{
  border:1px solid #f1d8e6;
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg, #fff 0%, #fffafd 100%);
}
.result-footer-guide h4{
  margin:0 0 10px;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}
.result-footer-guide ul{
  margin:0;
  padding-left:18px;
  color:var(--text-2);
  line-height:1.65;
  font-size:13px;
}
.result-footer-guide li + li{ margin-top:4px; }
.result-footer-guide .emph{
  color:var(--pink-700);
  font-weight:700;
}
.result-footer-guide .soft{
  color:var(--text-3);
}

.result-copyright{
  text-align:center;
  color:#8b8b99;
  font-size:11.5px;
  margin-top:8px;
}

/* ===== 안내 카드 ===== */
.guide-card{
  border-style:dashed;
  box-shadow:none;
  background:#fffefe;
}
.guide-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.guide-header h3{
  margin:0; font-size:16px;
}
.guide-close{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid #efd6e3;
  background:#fff;
  cursor:pointer;
}
.guide-list{
  margin:0;
  padding-left:18px;
  color:var(--text-2);
  line-height:1.65;
  font-size:13px;
}
.guide-list li + li{ margin-top:4px; }

/* ===== 반응형 ===== */
@media (max-width: 860px){
  .result-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  #zzoa-lmbti-wrap.zzoa-lmbti{
    padding-top:12px;
  }

  .lmbti-title-box{
    padding:10px 12px;
    border-radius:14px;
  }
  .title-icon{ width:36px; height:36px; font-size:20px; }
  .title-texts h1{ font-size:18px; }
  .title-texts p{ font-size:11.5px; }

  .lmbti-card{
    padding:14px;
    border-radius:18px;
  }

  .hero-row{
    align-items:flex-start;
  }
  .hero-copy h2{
    font-size:17px;
  }
  .hero-copy p{
    font-size:13px;
  }

  .input-row{
    flex-direction:column;
  }
  .btn, .input-row input{
    width:100%;
    height:44px;
  }

  .feature-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .quiz-top{
    flex-direction:column;
    align-items:stretch;
  }
  .quiz-tools{
    justify-content:flex-end;
  }

  .question-box h3{
    font-size:18px;
  }

  .answer-btn{
    padding:11px;
  }
  .answer-content .answer-title{
    font-size:14px;
  }

  .quiz-nav{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .quiz-nav-center{
    grid-column:1 / -1;
    order:3;
  }

  .result-hero-top{
    flex-direction:column;
    align-items:stretch;
  }
  .result-actions{
    justify-content:stretch;
  }
  .result-actions .action-btn{
    flex:1;
    justify-content:center;
  }

  .metric-item{
    grid-template-columns:72px 1fr 30px;
  }

  .compat-row{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .compat-label{
    text-align:left;
  }
}

@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
    animation:none !important;
    transition:none !important;
  }
}