body{font-family:'Inter','Noto Sans KR',sans-serif;background:#fff;color:#1A1712;line-height:1.8;font-size:16px}
html{scroll-behavior:smooth;scroll-padding-top:80px}
.scrollbar-hide::-webkit-scrollbar{display:none}
.fade-up{animation:fadeUp 1.2s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:translateY(20px)}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.portfolio-card{position:relative;overflow:hidden;border-radius:var(--r-sm);transition:all .5s ease}
.portfolio-card img{transition:transform 1.2s cubic-bezier(.25,1,.5,1)}
.portfolio-card:hover img{transform:scale(1.03)}
.premium-btn{border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);transition:all .4s ease}
.premium-btn:hover{border-color:var(--ink);background-color:var(--ink);color:#fff}

:root{
  --hnf-sans:'Inter','Noto Sans KR',sans-serif;
  /* 브랜드 토큰 — 키컬러=클로드 클레이, 골드=보조 메탈 디테일 */
  --bg:#F4F1EA; --ink:#1A1712; --ink-soft:#4a443c; --muted:#8a8275;
  --clay:#C15F3C; --clay-deep:#9E4A2C; --clay-soft:#CC785C; --clay-tint:#F4E7DF;
  --gold:#C9A96E;
  --border:#E5DFD3;
  --r:12px; --r-sm:8px; --r-pill:999px;
  --shadow:0 4px 22px rgba(26,23,18,.06);
  --shadow-lift:0 16px 40px rgba(26,23,18,.13);
}
#hnf-quiz-section{background:transparent}
#hnf-quiz-section *,#hnf-quiz-section *::before,#hnf-quiz-section *::after{box-sizing:border-box}
#hnf-intro{padding:0;text-align:center;position:relative;overflow:hidden;background:transparent}
.hnf-btn-start{display:inline-flex;align-items:center;gap:10px;padding:15px 38px;background:var(--clay);color:#fff;font-family:var(--hnf-sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;border:none;border-radius:var(--r-pill);cursor:pointer;font-weight:600;transition:background .3s}
.hnf-btn-start:hover{background:var(--clay-deep)}
/* Quiz question area */
#hnf-quiz{display:none;padding:0 0 64px;background:#fff}
.hnf-progress-wrap{position:sticky;top:0;z-index:10;background:#fff;padding:16px 24px 0;border-bottom:1px solid var(--border)}
.hnf-progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hnf-progress-label{font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-weight:600;font-family:var(--hnf-sans)}
.hnf-progress-num{font-family:var(--hnf-sans);font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.05em}
.hnf-progress-track{height:2px;background:var(--clay-tint);border-radius:var(--r-pill);overflow:hidden;margin-bottom:16px}
.hnf-progress-fill{height:100%;background:linear-gradient(90deg,var(--clay-soft),var(--clay));border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1)}
.hnf-q-area{max-width:580px;margin:0 auto;padding:48px 24px 0}
.hnf-q-number{font-family:var(--hnf-sans);font-size:10px;letter-spacing:.3em;color:var(--clay);text-transform:uppercase;margin-bottom:18px;display:block;font-weight:700}
.hnf-q-text{font-family:var(--hnf-sans);font-size:clamp(17px,3.2vw,22px);font-weight:700;line-height:1.5;color:var(--ink);margin-bottom:10px}
.hnf-q-hint{font-size:12px;color:var(--muted);margin-bottom:36px;line-height:1.65;font-family:var(--hnf-sans)}
/* Choice buttons (1-2-3-4-5 click & play) */
.hnf-choice-scale{margin-bottom:16px}
.hnf-choice-labels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.hnf-back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:8px;font-family:var(--hnf-sans);transition:color .15s}
.hnf-back-btn:hover{color:var(--clay)}
.hnf-option-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;aspect-ratio:3/4;min-height:150px;padding:16px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;color:#fff;background-size:calc(100% + 6px);background-origin:border-box;background-position:center;font-family:var(--hnf-sans);transition:transform .18s ease,box-shadow .2s ease,outline-color .2s;outline:2px solid transparent;outline-offset:-2px}
.hnf-option-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.hnf-option-card.selected{outline-color:var(--clay);box-shadow:0 16px 40px rgba(193,95,60,.28)}
.hnf-option-card>*{position:relative;z-index:1}
.hnf-option-letter{font-size:10px;letter-spacing:.22em;color:var(--clay-soft);text-transform:uppercase;font-weight:800;margin-bottom:3px}
.hnf-option-tag{font-size:14px;font-weight:800;line-height:1.3;margin-bottom:5px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hnf-option-desc{font-size:11.5px;line-height:1.6;color:#efece5;font-weight:400;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.hnf-scale-guide{font-size:11px;color:var(--muted);text-align:center;margin:0 0 12px}
.hnf-analyzing{padding:40px 16px;text-align:center}
.hnf-analyzing-ring{width:46px;height:46px;margin:0 auto 18px;border:3px solid var(--clay-tint);border-top-color:var(--clay);border-radius:50%;animation:hnfspin .9s linear infinite}
@keyframes hnfspin{to{transform:rotate(360deg)}}
.hnf-analyzing-title{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 8px}
.hnf-analyzing-step{font-size:12px;color:var(--muted);min-height:18px;margin:0 0 16px;transition:opacity .3s}
.hnf-analyzing-bar{max-width:280px;height:4px;background:var(--clay-tint);border-radius:99px;margin:0 auto;overflow:hidden}
.hnf-analyzing-bar-fill{height:100%;width:6%;background:linear-gradient(90deg,var(--clay-soft),var(--clay));border-radius:99px;transition:width .6s ease}
.hnf-choice-btns{display:flex;justify-content:center;gap:10px;padding:4px 0 10px}
.hnf-choice-btn{width:52px;height:52px;border:1.5px solid var(--border);background:#fff;color:#bbb;font-size:15px;font-weight:700;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);font-family:var(--hnf-sans)}
.hnf-choice-btn:hover{border-color:var(--clay-soft);color:var(--ink);background:#fbf9f5}
.hnf-choice-btn.selected{background:var(--clay);border-color:var(--clay);color:#fff;transform:scale(1.1)}
.hnf-choice-scale-hint{display:flex;justify-content:space-between;font-size:9px;color:#ccc;letter-spacing:.04em;padding:0 4px;font-family:var(--hnf-sans)}
/* Result page */
#hnf-result{display:none;padding:0 0 80px}
.hnf-result-hero{background:#f0ece3;padding:30px 16px 34px;text-align:center}
.hnf-result-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);max-width:520px;margin:0 auto;padding:30px 28px 28px;box-shadow:var(--shadow)}
.hnf-result-brand{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-family:var(--hnf-sans);font-weight:600}
.hnf-gemini-badge{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px;color:#a99873;-webkit-text-fill-color:#a99873}
.hnf-result-code-label{font-family:var(--hnf-sans);font-size:9px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;font-weight:700;margin-bottom:2px}
.hnf-result-code{font-family:var(--hnf-sans);font-size:clamp(42px,9.5vw,66px);letter-spacing:.06em;line-height:1;margin:0 0 0;text-transform:uppercase;font-weight:800;background:linear-gradient(120deg,var(--clay),var(--clay-deep));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* 무드 캐릭터 카드 (뿅 등장) */
.hnf-character{margin:0 0 4px;opacity:0;transform:scale(.55) translateY(10px);animation:hnfCharPop .65s cubic-bezier(.18,1.35,.45,1) .2s forwards}
@keyframes hnfCharPop{0%{opacity:0;transform:scale(.55) translateY(10px)}55%{opacity:1;transform:scale(1.1)}75%{transform:scale(.97)}100%{opacity:1;transform:scale(1) translateY(0)}}
.hnf-char-avatar{width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:50px;margin:0 auto 14px;box-shadow:var(--shadow-lift);position:relative;border:3px solid rgba(255,255,255,.7)}
.hnf-char-avatar::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px dashed currentColor;opacity:.35}
.hnf-char-label{font-family:var(--hnf-sans);font-size:9px;letter-spacing:.35em;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.hnf-char-nick{font-family:var(--hnf-sans);font-size:clamp(23px,5.5vw,32px);font-weight:800;letter-spacing:-.015em;line-height:1.2}
.hnf-char-tagline{font-size:12px;color:var(--muted);margin-top:7px;font-weight:500}
.hnf-char-traits{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:13px;margin-bottom:28px}
.hnf-char-trait{font-size:10px;font-weight:700;padding:4px 12px;border-radius:99px;letter-spacing:.02em}
.hnf-result-title{font-family:var(--hnf-sans);font-size:clamp(24px,5vw,40px);font-weight:700;line-height:1.2;color:var(--ink);margin-bottom:8px}
.hnf-result-subtitle{font-size:12px;color:var(--muted);letter-spacing:.04em;margin-bottom:24px;font-family:var(--hnf-sans)}
.hnf-mood-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px}
.hnf-mood-tag{padding:5px 14px;border:1px solid var(--border);border-radius:var(--r-pill);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);font-family:var(--hnf-sans)}
.hnf-mood-tag span{margin-left:4px;color:var(--clay);font-size:12px;font-weight:700}
.hnf-spectrum-section{background:#f7f4ee;border:1px solid var(--border);border-radius:var(--r-sm);padding:20px 24px;margin:0 auto;max-width:100%}
.hnf-spectrum-title{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-family:var(--hnf-sans);font-weight:700}
.hnf-spectrum-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hnf-spectrum-row:last-child{margin-bottom:0}
.hnf-spec-label-left,.hnf-spec-label-right{font-size:9px;color:var(--muted);width:52px;letter-spacing:.02em;flex-shrink:0;font-family:var(--hnf-sans)}
.hnf-spec-label-left{text-align:right}
.hnf-spec-label-right{text-align:left}
/* 양방향 스펙트럼 바 */
.hnf-spec-bar-center{flex:1;display:flex;align-items:center;height:6px;gap:0}
.hnf-spec-bar-half{flex:1;height:100%;background:#e7e1d5;overflow:hidden}
.hnf-spec-bar-half-left{border-radius:3px 0 0 3px;display:flex;justify-content:flex-end}
.hnf-spec-bar-half-right{border-radius:0 3px 3px 0}
.hnf-spec-center-tick{width:2px;height:10px;background:#c9c1b1;flex-shrink:0;margin-top:-2px;border-radius:1px}
.hnf-spec-fill-left{height:100%;background:linear-gradient(270deg,var(--clay-soft),var(--clay));transition:width .8s cubic-bezier(.4,0,.2,1)}
.hnf-spec-fill-right{height:100%;background:linear-gradient(90deg,var(--clay-soft),var(--clay));transition:width .8s cubic-bezier(.4,0,.2,1)}
.hnf-result-body{max-width:600px;margin:0 auto;padding:48px 24px 0}
.hnf-result-section{margin-bottom:40px}
.hnf-section-eye{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:12px;font-weight:700;font-family:var(--hnf-sans)}
.hnf-section-eye::after{content:'';flex:1;height:1px;background:var(--border)}
.hnf-diagnosis-text{font-family:var(--hnf-sans);font-size:14px;font-weight:400;line-height:1.9;color:var(--ink-soft)}
/* 진단문 핵심 강조 — 클레이 하이라이터 + 볼드 */
.hnf-hl{background:linear-gradient(transparent 58%, rgba(193,95,60,.22) 58%);color:var(--ink);font-weight:700;padding:0 1px;border-radius:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hnf-unique-badge{background:var(--clay-tint);color:var(--ink);padding:16px 20px;margin-bottom:24px;border-left:3px solid var(--clay);border-radius:0 var(--r-sm) var(--r-sm) 0}
.hnf-unique-badge p{font-size:12.5px;line-height:1.7;color:var(--ink-soft);font-family:var(--hnf-sans)}
.hnf-unique-badge strong{color:var(--clay-deep);display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;font-weight:700;font-family:var(--hnf-sans)}
.hnf-directing-grid{display:flex;flex-direction:column;gap:0}
.hnf-directing-item{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--border)}
.hnf-directing-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay-soft);padding-top:2px;font-weight:700;font-family:var(--hnf-sans)}
.hnf-directing-value{font-size:13px;line-height:1.65;color:var(--ink-soft);font-family:var(--hnf-sans)}
.hnf-avoid-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.hnf-avoid-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.65;color:var(--ink-soft);font-family:var(--hnf-sans)}
.hnf-avoid-list li::before{content:'×';flex-shrink:0;color:var(--clay);font-size:14px;line-height:1.5;font-weight:900}
.hnf-directors-note{background:var(--ink);color:#fff;padding:24px 20px;margin-top:24px;border-radius:var(--r)}
.hnf-directors-note-title{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay-soft);margin-bottom:12px;font-family:var(--hnf-sans);font-weight:700}
.hnf-directors-note-body{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.62);font-family:var(--hnf-sans)}
.hnf-directors-note-sig{margin-top:12px;font-size:12px;color:rgba(255,255,255,.4);font-family:var(--hnf-sans)}
.hnf-cta-area{background:#f7f4ee;border-top:1px solid var(--border);padding:48px 24px;text-align:center}
.hnf-cta-title{font-family:var(--hnf-sans);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:7px}
.hnf-cta-sub{font-size:12px;color:var(--muted);margin-bottom:32px;font-family:var(--hnf-sans)}
.hnf-cta-buttons{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto}
.hnf-btn-cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px;font-size:12px;letter-spacing:.1em;cursor:pointer;border:none;border-radius:var(--r-pill);transition:all .25s;text-decoration:none;font-family:var(--hnf-sans)}
.hnf-btn-cta-booking{background:var(--clay);color:#fff;font-weight:700}
.hnf-btn-cta-booking:hover{background:var(--clay-deep)}
.hnf-btn-cta-primary{background:transparent;border:1px solid var(--border);color:var(--ink-soft)}
.hnf-btn-cta-primary:hover{border-color:var(--clay);color:var(--clay)}
.hnf-btn-cta-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.hnf-btn-cta-outline:hover{border-color:var(--clay-soft);color:var(--ink-soft)}
.hnf-btn-cta-ghost{background:transparent;color:var(--muted);font-size:11px;padding:10px}
.hnf-btn-cta-ghost:hover{color:var(--ink-soft)}
.hnf-fade-in{animation:hnfFadeIn .6s ease forwards}
.hnf-slide-up{animation:hnfSlideUp .45s cubic-bezier(.4,0,.2,1) forwards}
@keyframes hnfFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hnfSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hnf-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:11px 22px;font-size:12px;letter-spacing:.05em;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;z-index:9999;border-radius:var(--r-pill);border-top:1.5px solid rgba(255,255,255,.2);font-family:var(--hnf-sans)}
.hnf-toast.hnf-show{opacity:1;transform:translateX(-50%) translateY(0)}
.gemini-gradient{color:#a99873;-webkit-text-fill-color:#a99873}
/* 키컬러 디바이더(수작업 느낌 브러시 스트로크 — 클레이) */
.hnf-gold-rule{width:92px;height:20px;margin:0 auto 20px;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M7 12 C17 5 25 7 37 10 C47 12 55 4 69 8 C83 11 91 17 113 11 C91 18 83 15 69 16 C55 20 47 12 37 14 C25 17 17 18 7 12 Z' fill='%23C15F3C'/%3E%3Ccircle cx='117' cy='9' r='1.7' fill='%23C15F3C'/%3E%3Ccircle cx='2.5' cy='15' r='1.3' fill='%23C15F3C'/%3E%3C/svg%3E")}
/* 필름 그레인(전역 은은한 텍스처) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='gr'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gr)'/%3E%3C/svg%3E")}
.splide__slide img{transition:filter .6s ease,transform .8s ease;-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;user-drag:none;user-select:none;-webkit-user-select:none}
.splide__slide:hover img{filter:grayscale(0)!important}
#portfolio-splide .splide__track{cursor:grab}
#portfolio-splide .splide__track:active{cursor:grabbing}
@media(max-width:480px){
  .hnf-choice-labels{grid-template-columns:1fr 1fr;gap:10px}
  /* b card overlay: left aligned by default */
  .hnf-choice-btn{width:46px;height:46px;font-size:14px}
  .hnf-directing-item{grid-template-columns:1fr;gap:3px}
}
@media(min-width:768px){
  #hnf-quiz{max-width:720px;margin:0 auto}
  .hnf-progress-wrap{padding:20px 40px 0;border-radius:0}
  .hnf-q-area{max-width:640px;padding:56px 40px 0}
  .hnf-result-hero{padding:42px 40px 46px}
  .hnf-result-card{max-width:600px;padding:40px 48px 38px}
  .hnf-result-body{max-width:680px;padding:56px 40px 0}
  .hnf-cta-area{padding:60px 40px}
  .hnf-cta-buttons{max-width:480px;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .hnf-btn-cta-booking{flex:1 1 100%}
  .hnf-btn-cta-primary,.hnf-btn-cta-outline{flex:1}
  .hnf-btn-cta-ghost{flex:1 1 100%}
}
/* 오픈 이벤트 팝업 오픈 트랜지션 */
#site-popup.sp-on{ opacity:1 !important; }
#site-popup.sp-on > div{ transform:none !important; }