/* =========================================================
   Mirror Test — shared stylesheet (KO + EN)
   Design language: still water / gilded mirror / Narcissus myth
   ========================================================= */

   :root{
    --nt-ink:        #0a0d12;
    --nt-panel:       #11151f;
    --nt-panel-2:     #171c28;
    --nt-line:        rgba(201,168,118,0.16);
  
    --nt-gold:        #c9a876;
    --nt-gold-bright: #e8cd97;
    --nt-water:       #3f7d8c;
    --nt-water-bright:#6fb3c2;
  
    --nt-text:        #ece7db;
    --nt-text-muted:  #9aa0ab;
    --nt-text-faint:  #7d8794; 
  
    --nt-radius-lg: 28px;
    --nt-radius-md: 18px;
    --nt-radius-sm: 12px;
  
    --nt-font-display: 'Playfair Display', 'Noto Serif KR', serif;
    --nt-font-body: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  
    --nt-ad-height: 100px;
    --nt-shadow-gold: 0 12px 40px rgba(201,168,118,0.16);
  }
  
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  
  body{
    background:
      radial-gradient(60% 45% at 50% 0%, rgba(63,125,140,0.14) 0%, rgba(10,13,18,0) 60%),
      radial-gradient(50% 40% at 85% 85%, rgba(201,168,118,0.08) 0%, rgba(10,13,18,0) 60%),
      var(--nt-ink);
    color: var(--nt-text);
    font-family: var(--nt-font-body);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nt-ad-height) + env(safe-area-inset-bottom, 0px) + 18px);
  }
  
  .nt-app{
    max-width: 560px;
    margin: 0 auto;
    padding: 0 22px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .nt-header{
    padding: 26px 0 6px;
    display:flex;
    align-items:center;
    justify-content: center;
  }
  .nt-brand{
    font-family: var(--nt-font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nt-gold);
    font-size: 14px;
    opacity: 0.85;
  }
  
  .nt-shell{ flex:1; display:flex; flex-direction:column; padding-top: 8px; }
  
  .nt-screen{ display:none; }
  .nt-screen.is-active{
    display:flex;
    flex-direction:column;
    animation: nt-fade-in .55s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes nt-fade-in{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  
  /* ---------- intro screen ---------- */
  .nt-screen--intro{ align-items:center; text-align:center; padding: 26px 0 40px; }
  
  .nt-ripple{ width: 220px; height: 220px; margin: 6px auto 22px; position:relative; }
  .nt-ripple-svg{ width:100%; height:100%; overflow: visible; }
  .nt-ripple-ring{
    fill:none;
    stroke: var(--nt-gold);
    stroke-width: 1;
    opacity: 0;
    transform-origin: 200px 200px;
    animation: nt-ripple-out 4.2s ease-out infinite;
  }
  .nt-ripple-ring.r1{ animation-delay: 0s; }
  .nt-ripple-ring.r2{ animation-delay: 1.4s; }
  .nt-ripple-ring.r3{ animation-delay: 2.8s; }
  @keyframes nt-ripple-out{
    0%{ opacity: 0; transform: scale(0.55); }
    12%{ opacity: 0.55; }
    100%{ opacity: 0; transform: scale(1.65); }
  }
  .nt-ripple-core{ fill: url(#nt-core-gradient); }
  .nt-ripple-glow{ filter: blur(1px); }
  
  .nt-eyebrow{
    font-family: var(--nt-font-body);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nt-water-bright);
    margin: 0 0 14px;
    font-weight: 600;
  }
  
  .nt-title{
    font-family: var(--nt-font-display);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.32;
    margin: 0 0 16px;
    color: var(--nt-text);
  }
  
  .nt-subtitle{
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--nt-text-muted);
    max-width: 400px;
    margin: 0 0 26px;
  }
  
  .nt-meta{
    list-style:none;
    display:flex; gap: 10px; flex-wrap: wrap; justify-content:center;
    padding:0; margin: 0 0 32px;
  }
  .nt-meta li{
    font-size: 12.5px; color: var(--nt-gold);
    border: 1px solid var(--nt-line);
    background: rgba(201,168,118,0.06);
    padding: 7px 14px; border-radius: 999px;
    letter-spacing: 0.01em;
  }
  
  /* ---------- buttons ---------- */
  .nt-btn{
    font-family: var(--nt-font-body);
    font-size: 15.5px; font-weight: 600;
    border-radius: 999px; padding: 16px 30px; border: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    letter-spacing: 0.01em;
  }
  .nt-btn:active{ transform: scale(0.97); }
  .nt-btn--primary{
    background: linear-gradient(135deg, var(--nt-gold-bright), var(--nt-gold));
    color: #221a0f; box-shadow: var(--nt-shadow-gold);
  }
  .nt-btn--primary:hover{ box-shadow: 0 14px 46px rgba(201,168,118,0.30); }
  .nt-btn--ghost{
    background: transparent; color: var(--nt-text-muted);
    border: 1px solid var(--nt-line);
  }
  .nt-btn--ghost:hover{ color: var(--nt-text); border-color: rgba(201,168,118,0.4); }

  .nt-btn--pwa{
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 14px; padding: 11px 22px; font-size: 13.5px;
    background: transparent; color: var(--nt-water-bright);
    border: 1px solid rgba(111,179,194,0.35);
  }
  .nt-btn--pwa svg{ width: 15px; height: 15px; flex-shrink: 0; }
  .nt-btn--pwa:hover{ color: var(--nt-text); border-color: rgba(111,179,194,0.6); background: rgba(111,179,194,0.06); }
  .nt-btn--pwa[hidden]{ display: none; }
  
  /* ---------- quiz screen ---------- */
  .nt-screen--quiz{ padding: 18px 0 40px; }
  
  .nt-progress{ margin-bottom: 34px; }
  .nt-progress-track{
    height: 3px; background: var(--nt-panel-2);
    border-radius: 999px; overflow: hidden;
  }
  .nt-progress-fill{
    height: 100%; width: 5%;
    background: linear-gradient(90deg, var(--nt-water), var(--nt-gold));
    border-radius: 999px;
    transition: width .45s cubic-bezier(.22,.61,.36,1);
  }
  .nt-progress-label{
    display:flex; align-items:center; justify-content: space-between;
    margin-top: 12px;
  }
  .nt-back{
    background:none; border:none; color: var(--nt-text-faint);
    font-size: 18px; cursor:pointer; padding: 4px 8px; visibility: hidden;
  }
  .nt-back.is-visible{ visibility: visible; }
  .nt-back:hover{ color: var(--nt-gold); }
  .nt-progress-count{
    font-variant-numeric: tabular-nums; font-size: 12.5px;
    letter-spacing: 0.08em; color: var(--nt-text-faint);
  }
  
  .nt-question-wrap{ min-height: 360px; }
  .nt-question-num{
    font-size: 13px; color: var(--nt-water-bright);
    letter-spacing: 0.1em; margin: 0 0 12px; font-weight: 600;
  }
  .nt-question-text{
    font-family: var(--nt-font-display); font-weight: 600; font-size: 24px;
    line-height: 1.45; margin: 0 0 30px; min-height: 108px;
  }
  
  .nt-options{ display:flex; flex-direction:column; gap: 10px; }
  .nt-option{
    position: relative; overflow: hidden; text-align:left;
    padding: 16px 18px; border-radius: var(--nt-radius-md);
    border: 1px solid var(--nt-line); background: var(--nt-panel);
    color: var(--nt-text); font-family: var(--nt-font-body);
    font-size: 15px; cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .12s ease;
  }
  .nt-option:hover{ border-color: rgba(201,168,118,0.5); background: var(--nt-panel-2); }
  .nt-option:active{ transform: scale(0.985); }
  .nt-option.is-selected{
    border-color: var(--nt-gold); background: rgba(201,168,118,0.10);
  }
  .nt-option-ripple{
    position:absolute; border-radius:50%; background: rgba(201,168,118,0.35);
    transform: scale(0); pointer-events:none;
    animation: nt-option-ripple .55s ease-out forwards;
  }
  @keyframes nt-option-ripple{
    to{ transform: scale(9); opacity: 0; }
  }
  
  /* ---------- result screen ---------- */
  .nt-screen--result{ align-items:center; text-align:center; padding: 22px 0 40px; }
  
  /* 캡처를 위해 깔끔하게 배경이 잡히도록 래핑 영역 스타일링 */
  .nt-capture-area {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 20px 20px;
    background: transparent; /* 평상시엔 투명 */
    border-radius: var(--nt-radius-md);
  }
  
  .nt-result-frame{
    width: 168px; height: 168px; border-radius: var(--nt-radius-lg);
    padding: 5px; background: conic-gradient(from 180deg, var(--nt-gold), var(--nt-water), var(--nt-gold));
    margin: 6px auto 22px;
    animation: nt-frame-in .6s cubic-bezier(.22,.61,.36,1);
  }  
  @keyframes nt-frame-in{
    from{ opacity:0; transform: scale(0.7) rotate(-8deg); }
    to{ opacity:1; transform: scale(1) rotate(0); }
  }
  .nt-result-image{
    width: 100%; height: 100%; border-radius: calc(var(--nt-radius-lg) - 5px);
    object-fit: cover; display: block; background: var(--nt-panel);
  }
  
  .nt-result-title{ font-family: var(--nt-font-display); font-weight: 700; font-size: 28px; margin: 0 0 10px; }
  .nt-result-tagline{
    font-family: var(--nt-font-display); font-style: italic; font-weight: 500; font-size: 16px;
    line-height: 1.6; color: var(--nt-gold-bright); max-width: 400px; margin: 0 auto 18px;
  }
  
  .nt-result-traits{
    list-style:none; display:flex; gap: 8px; flex-wrap: wrap; justify-content:center;
    padding:0; margin: 0 0 26px;
  }
  .nt-result-traits li{
    font-size: 12px; color: var(--nt-water-bright);
    border: 1px solid rgba(63,125,140,0.35); background: rgba(63,125,140,0.08);
    padding: 6px 13px; border-radius: 999px;
  }
  
  /* Distribution Chart */
  .nt-distribution { width: 100%; margin: 0 auto 10px; position: relative; }
  .nt-dist-chart { position: relative; width: 100%; height: 64px; margin-bottom: 24px; }
  .nt-dist-svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .nt-dist-fill { fill: url(#nt-dist-gradient); }
  .nt-dist-line { stroke: var(--nt-gold); stroke-width: 1.5px; fill: none; vector-effect: non-scaling-stroke; }
  .nt-dist-avg { stroke: var(--nt-line); stroke-width: 1px; stroke-dasharray: 4, 4; vector-effect: non-scaling-stroke; }
  .nt-dist-avg-label {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    font-size: 11px; color: var(--nt-text-muted); margin-top: 6px;
  }
  .nt-dist-marker {
    position: absolute; top: -22px; left: 0%; height: calc(100% + 22px);
    transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
    transition: left 0.8s cubic-bezier(.22,.61,.36,1) 0.3s; z-index: 10; pointer-events: none;
  }
  .nt-dist-marker-label {
    background: var(--nt-gold-bright); color: var(--nt-ink);
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    white-space: nowrap; margin-bottom: 4px; box-shadow: 0 4px 10px rgba(232,205,151,0.3);
  }
  .nt-dist-marker-line { width: 1.5px; flex: 1; background: linear-gradient(to bottom, var(--nt-gold-bright), rgba(232,205,151,0.1)); }
  .nt-dist-marker-pin {
    width: 10px; height: 10px; background: var(--nt-ink);
    border: 2px solid var(--nt-gold-bright); border-radius: 50%;
    position: absolute; bottom: -5px; box-shadow: 0 0 10px rgba(232,205,151,0.6);
  }
  .nt-gauge-labels {
    display:flex; justify-content:space-between; align-items:baseline;
    font-size: 12px; color: var(--nt-text-faint); letter-spacing: 0.04em; margin-bottom: 16px;
  }
  .nt-gauge-score { font-family: var(--nt-font-display); font-size: 15px; color: var(--nt-gold); font-weight: 600; }
  
  /* 캡처될 때만 보이는 워터마크 */
  .nt-watermark {
    display: none;
    text-align: center; font-size: 12px; color: rgba(236, 231, 219, 0.4); 
    margin-top: 10px; font-family: var(--nt-font-body); letter-spacing: 0.05em;
  }
  
  .nt-result-desc{
    font-size: 15px; line-height: 1.8; color: var(--nt-text-muted);
    max-width: 420px; margin: 0 auto 22px; min-height: 84px; cursor: pointer;
  }
  
  .nt-result-tip{
    text-align:left; width: 100%; max-width: 420px; margin: 0 auto 26px;
    padding: 16px 18px; border-radius: var(--nt-radius-md);
    border: 1px solid var(--nt-line); background: var(--nt-panel);
  }
  .nt-tip-label{
    display:block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--nt-gold); font-weight: 600; margin-bottom: 7px;
  }
  .nt-result-tip p{ margin:0; font-size: 13.5px; line-height: 1.7; color: var(--nt-text-muted); }
  
  .nt-result-actions{ display:flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
  
  .nt-share-row{ width:100%; max-width: 420px; margin: 0 auto 22px; }
  .nt-share-label{
    display:block; font-size: 12px; color: var(--nt-text-faint);
    letter-spacing: 0.05em; margin-bottom: 12px;
  }
  .nt-share-icons{ display:flex; gap: 10px; justify-content:center; }
  .nt-share-btn{
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--nt-line); background: var(--nt-panel); color: var(--nt-text-muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition: border-color .18s ease, color .18s ease, transform .12s ease, background .18s ease, box-shadow .18s ease;
  }
  .nt-share-btn svg{ width: 18px; height: 18px; }
  .nt-share-btn:hover{ border-color: var(--nt-gold); color: var(--nt-gold-bright); transform: translateY(-2px); }
  .nt-share-btn:active{ transform: translateY(0) scale(0.96); }
  
  /* 인스타그램 공유(캡처) 버튼 */
  .nt-share-btn.is-ig {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border: none; color: #fff;
  }
  .nt-share-btn.is-ig:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(220, 39, 67, 0.4); color: #fff; }
  
  /* 페이스북 공유 버튼 */
  .nt-share-btn.is-fb {
    background: #1877F2; border-color: #1877F2; color: #fff;
  }
  .nt-share-btn.is-fb:hover { background: #166fe5; border-color: #166fe5; transform: translateY(-2px); color: #fff; }
  
  /* 카카오톡 공유 버튼 */
  .nt-share-btn.is-kakao{ background: #FEE500; border-color: #FEE500; color: #3C1E1E; }
  .nt-share-btn.is-kakao:hover{ background:#f5da2b; border-color:#f5da2b; color:#3C1E1E; transform: translateY(-2px); }
  
  .nt-adfit-slot{ width: 100%; max-width: 320px; margin: 0 auto 24px; display: flex; justify-content: center; min-height: 100px; }
  .nt-disclaimer{ font-size: 12px; line-height: 1.7; color: var(--nt-text-faint); max-width: 420px; margin: 0 auto; }
  .nt-shared-notice{
    font-size: 12.5px; color: var(--nt-water-bright); border: 1px solid rgba(63,125,140,0.35);
    background: rgba(63,125,140,0.08); padding: 8px 16px; border-radius: 999px; margin: 0 0 18px; display: none;
  }
  .nt-shared-notice.is-visible{ display:inline-block; }
  
  /* ---------- toast ---------- */
  .nt-toast{
    position: fixed; left: 50%; bottom: calc(var(--nt-ad-height) + env(safe-area-inset-bottom, 0px) + 22px);
    transform: translate(-50%, 12px); background: var(--nt-panel-2); border: 1px solid var(--nt-line);
    color: var(--nt-text); font-size: 13.5px; padding: 12px 20px; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 40; white-space: nowrap; text-align: center; line-height: 1.4;
  }
  .nt-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
  
  /* ---------- fixed bottom ad ---------- */
  .ad-fixed-bottom{
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    min-height: var(--nt-ad-height); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box; background: var(--nt-panel); border-top: 1px solid var(--nt-line);
    display:flex; align-items:center; justify-content:center; overflow:hidden; z-index: 30;
  }
  .ad-fixed-bottom .adsbygoogle{ width:100%; }
  
  /* ---------- responsive ---------- */
  @media (max-width: 420px){
    .nt-title { font-size: 27px; margin-bottom: 12px; }
    .nt-subtitle { font-size: 14.5px; margin-bottom: 20px; }
    .nt-meta { margin-bottom: 24px; }
    .nt-question-text { font-size: 20px; min-height: 92px; }
    .nt-result-title { font-size: 23px; }
    .nt-ripple { width: 140px; height: 140px; margin-bottom: 16px; }
    .nt-result-frame { width: 130px; height: 130px; margin-bottom: 16px; }
    .nt-section { padding: 16px; }
    .nt-fact-list li { font-size: 13.5px; }
    .nt-rel-box { font-size: 13.5px; }
  }
  
  @media (max-height: 700px) {
    .nt-screen--intro { padding-top: 10px; padding-bottom: 20px; }
    .nt-ripple { width: 120px; height: 120px; margin-bottom: 12px; }
    .nt-title { font-size: 24px; margin-bottom: 10px; }
    .nt-subtitle { font-size: 13.5px; margin-bottom: 16px; line-height: 1.5; }
    .nt-meta { margin-bottom: 16px; }
    .nt-meta li { padding: 5px 12px; font-size: 11.5px; }
  }
  
  @media (prefers-reduced-motion: reduce){
    .nt-ripple-ring{ animation: none; opacity: 0.35; }
    .nt-screen.is-active{ animation: none; }
    .nt-result-frame{ animation: none; }
    .nt-option-ripple{ animation: none; display:none; }
    .nt-dist-marker { transition: none; }
  }
  
  .nt-btn:focus-visible, .nt-option:focus-visible, .nt-back:focus-visible{
    outline: 2px solid var(--nt-gold-bright); outline-offset: 2px;
  }
  
  .nt-result-details { width: 100%; max-width: 420px; margin: 0 auto 30px; text-align: left; }
  .nt-section { background: var(--nt-panel); border: 1px solid var(--nt-line); border-radius: var(--nt-radius-md); padding: 20px; margin-bottom: 16px; }
  .nt-sec-title { font-family: var(--nt-font-body); font-size: 15px; font-weight: 700; color: var(--nt-gold-bright); margin: 0 0 16px; letter-spacing: 0.02em; }
  .nt-fact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .nt-fact-list li { font-size: 14px; line-height: 1.6; color: var(--nt-text); display: flex; align-items: flex-start; gap: 8px; }
  .nt-check { color: var(--nt-water-bright); font-weight: bold; flex-shrink: 0; }
  .nt-rel-box { font-size: 14px; line-height: 1.6; color: var(--nt-text); margin-bottom: 14px; }
  .nt-rel-box:last-child { margin-bottom: 0; }
  .nt-rel-box strong { color: var(--nt-gold); margin-right: 4px; }
  .nt-match-row { display: flex; flex-direction: column; gap: 12px; }
  .nt-match-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--nt-radius-sm); background: rgba(10, 13, 18, 0.4); }
  .nt-match-card.is-good { border-left: 3px solid var(--nt-water-bright); }
  .nt-match-card.is-bad { border-left: 3px solid #d9534f; }
  .nt-match-icon { font-size: 24px; flex-shrink: 0; }
  .nt-match-info { display: flex; flex-direction: column; gap: 4px; }
  .nt-match-name { font-size: 13.5px; font-weight: 700; color: var(--nt-text); }
  .nt-match-desc { font-size: 12.5px; color: var(--nt-text-muted); line-height: 1.4; }

  /* ---------- promo grid (다른 콘텐츠 링크) ---------- */
  .nt-promo-section{
    width: 100%; max-width: 420px; margin: 8px auto 26px;
    padding-top: 22px; border-top: 1px solid var(--nt-line);
  }
  .nt-promo-title{
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--nt-text-faint); text-align: center; margin: 0 0 14px; font-weight: 600;
  }
  .nt-promo-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  }
  .promo-card{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 12px 6px 11px; min-height: 74px;
    border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-line);
    background: var(--nt-panel); text-decoration: none; text-align: center;
    transition: border-color .18s ease, transform .15s ease, background .18s ease, box-shadow .18s ease;
  }
  .promo-card:hover{
    border-color: rgba(201,168,118,0.45); background: var(--nt-panel-2);
    transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201,168,118,0.10);
  }
  .promo-card:active{ transform: translateY(0) scale(0.97); }
  .promo-card:focus-visible{ outline: 2px solid var(--nt-gold-bright); outline-offset: 2px; }
  .promo-icon{ font-size: 19px; line-height: 1; }
  .promo-text{
    font-size: 11px; line-height: 1.35; color: var(--nt-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: keep-all;
  }

  @media (max-width: 420px){
    .nt-promo-grid{ grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .promo-card{ padding: 10px 4px 9px; min-height: 68px; }
    .promo-icon{ font-size: 17px; }
    .promo-text{ font-size: 10.5px; }
  }