/* HAEBODA / AI STUDIO — YOGO-inspired charcoal/champagne design V2
   AI STUDIO is the product. 'by HAEBODA' is the provenance.
   Purely visual. Preserves all forms, auth, V5 video workflow, safety notices.
   Core palette: deep navy #0b0d11, slate #272931, ice #e5cb88, parent lime #d6ff9d. */
/* Use platform fonts to avoid third-party requests during account login and rendering. */
:root{
  color-scheme:dark;
  --bg:#0b0d11;
  --panel:#181b21;
  --ink:#f6f5f0;
  --muted:#a9a9ac;
  --line:#3b3d43;
  --mint:#e5cb88; /* keeps existing accent-dependent components coherent */
  --mint-deep:#cab173;
  --studio-ice:#e5cb88;
  --studio-sky:#f1e5c8;
  --studio-navy:#0b0d11;
  --studio-slate:#272931;
  --studio-parent-lime:#d6ff9d;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
}
html{scrollbar-color:#425b6e #0b0d11}
body{
  background:
    radial-gradient(ellipse 80% 720px at 82% 8%,#79603030,transparent 72%),
    radial-gradient(ellipse 72% 650px at -20% 57%,#66503631,transparent 74%),
    #0b0d11;
  color:var(--ink);
}
::selection{background:#e5cb88;color:#0b0d11}
.ambient-left{background:#65533a38;opacity:.4}
.ambient-right{background:#6358403b;opacity:.43}
.site-header{
  height:85px;border-bottom:1px solid #8e7a552c;
  position:relative;gap:20px;
}
.site-header .wordmark{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;min-width:0;white-space:nowrap;
}
.site-header .brand-mark,
.site-header .brand-image,
.site-header .wordmark-type{display:none}
.site-header .studio-parent-symbol{
  display:block;width:31px;height:33px;flex:0 0 31px;
  opacity:.96;object-fit:contain;
}
.site-header .studio-product-name{display:flex;flex-direction:column;gap:4px;line-height:1.05}
.site-header .studio-product-name strong{
  display:block;color:#fbfaf5;font-size:19px;font-weight:900;
  letter-spacing:.025em;
}
.site-header .studio-product-name small{
  display:block;color:#bcb9b0;font-size:9px;font-weight:700;letter-spacing:.21em;
}
.site-header .studio-product-name small span{color:#d6ff9d}
.site-header .header-nav{color:#a8bdc7;letter-spacing:.09em;font-size:11px;gap:33px}
.site-header .header-nav a:hover{color:#f4e2ba}
.site-header .header-link{
  min-height:43px;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:7px;
  color:#eee5d1;border:1px solid #7c735e;
  background:#2c2a2540;font-size:12px;
}
.site-header .header-link:hover{background:#38342c;color:#f4fbff}
.eyebrow{color:#d9c48f}
.eyebrow-dot,.status-dot{
  background:#d6ff9d;box-shadow:0 0 18px #d6ff9d67
}
.button,.studio-section .button-primary{border-radius:8px}
.button-primary,.studio-section .button-primary{
  background:#a0d5e6;color:#10212b;
  border:1px solid #a0d5e6;box-shadow:0 12px 32px #74b9d320;
}
.button-primary:hover,.studio-section .button-primary:hover{
  background:#c1eaf7;border-color:#c1eaf7
}
.button-secondary{background:#263a49;border:1px solid #506d7d;color:#ecf5f9}
.button-secondary:hover{background:#30495b}
.button:focus-visible,.header-nav a:focus-visible,.header-link:focus-visible,
.text-button:focus-visible,.result-tabs button:focus-visible,
.concept-option:focus-visible,.hook-variant:focus-visible{
  outline:3px solid #b6e8f7;outline-offset:3px
}
.hero.hero-editorial{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.hero-editorial .eyebrow{color:#c8d6df;letter-spacing:.19em}
.hero-editorial .eyebrow .eyebrow-dot{background:#d6ff9d}
.hero-editorial h1 em{
  color:#e5cb88;background:linear-gradient(105deg,#f8ecd0,#e5cb88 72%,#c3a460);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-editorial .hero-lead{color:#c6c1b6}
.hero-editorial .studio-link-secondary{
  color:#d9cfbb;border-bottom:1px solid #8c7e60
}
.hero-editorial .studio-link-secondary:hover{color:#f2dba3;border-bottom-color:#f2dba3}
.hero-footnote{color:#a6a399}
.editorial-canvas{
  border-color:#605c4d;
  background:
    repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ebcb7908 calc(25% - 1px),#ebcb7908 25%),
    radial-gradient(ellipse at 60% 52%,#88703a38,transparent 64%),
    linear-gradient(125deg,#232329,#28262a 48%,#151519);
}
.editorial-canvas:before{
  background:linear-gradient(103deg,transparent 34%,#efca7d15 51%,transparent 68%)
}
.editorial-canvas:after{
  border-color:#ddb96542;
  box-shadow:0 0 0 58px #bfa66d0a,0 0 0 118px #bfa66d06
}
.editorial-canvas-top,.editorial-canvas-bottom{color:#b2a992}
.editorial-canvas-top span:last-child{color:#f0dbad}
.canvas-index{color:#b9a278}
.canvas-dot{color:#d6ff9d}
.canvas-entry{border-bottom-color:#d9c0841c}
.canvas-entry:nth-child(1) strong{color:#9c947f}
.canvas-entry:nth-child(2) strong{color:#e6cc87;text-shadow:0 0 50px #e0bf7945}
.canvas-entry:nth-child(3) strong{-webkit-text-stroke:1px #c9af72}
.canvas-entry i{color:#c8bd9f}
.canvas-rail{background:linear-gradient(#a88b5900,#a88b59 28%,#a88b59 70%,#a88b5900)}
.canvas-rail span{background:#d6ff9d}
.hero-bottom{border-top-color:#6e94a53b;border-bottom-color:#6e94a52a}
.hero-bottom span,.hero-bottom span:last-child{color:#b7ae9f}
.studio-section{
  background:radial-gradient(ellipse 85% 430px at 45% 0%,#59463031,transparent 73%)
}
.studio-heading h2 em{color:#e4cd95}
.preview-status{
  background:#282722;border:1px solid #655b45;border-radius:8px
}
.preview-status strong{color:#f3e5c5}
.preview-status small{color:#c2b6a0}
.studio-section .studio-panel{
  background:linear-gradient(155deg,#232429,#191a20 85%);
  border:1px solid #575147;border-radius:12px;
  box-shadow:0 28px 64px #00000065;
}
.studio-section .studio-panel:first-child{border-top:2px solid #e5cb88}
.studio-section .studio-panel:last-child{border-top:2px solid #84775f}
.studio-section .panel-step{color:#dcc894}
.studio-panel label,.member-panel label{color:#eee8dd}
.studio-panel input,.studio-panel textarea,.studio-panel select,
.member-panel input{
  background:#18191e;border:1px solid #575249;color:#f6f2e9;border-radius:6px
}
.studio-panel input::placeholder,.studio-panel textarea::placeholder,
.member-panel input::placeholder{color:#9d9a94}
.studio-panel input:focus,.studio-panel textarea:focus,.studio-panel select:focus,
.member-panel input:focus{
  border-color:#e2c681;box-shadow:0 0 0 3px #91c8dc1e;outline-color:#e2c681
}
.concept-picker-heading>span{color:#f1e7d2}
.concept-picker-heading>small{color:#beb5a1}
.concept-option,.studio-section .concept-option{
  background:#202027;border:1px solid #58534b;color:#d8d2c8;border-radius:8px
}
.concept-option .concept-icon{color:#c0a96d}
.concept-option small{color:#b4aa9b}
.concept-option:hover,.hook-variant:hover{border-color:#ecd394}
.concept-option.active,.concept-option[aria-pressed=true]{
  background:#40382a;border-color:#e5cb88;box-shadow:inset 0 0 0 1px #e5cb882a
}
.concept-option.active strong{color:#fff4d8}
.concept-result{
  background:linear-gradient(135deg,#40382e,#29272a);
  border:1px solid #81704e;border-radius:9px
}
.concept-caption,.concept-meta{color:#ddc999}
.concept-result strong{color:#fffaf1}
.hook-variant{background:#292725;border-color:#6c5b3e;color:#e8e0d1}
.hook-variant[aria-pressed=true]{background:#55472f;border-color:#e9d097;color:#fff8e9}
.brief-quality{color:#cbbfa8}
.shot-card{background:#232329;border-color:#5e5649;border-left-color:#d6bd7c}
.shot-card-head{color:#e7d6ac}
.shot-card h4{color:#fff9eb}
.shot-label,.shot-visual{color:#a8a297}
.shot-voice{color:#dfd5c2}
.output-editor{background:#1b1c21;color:#f1eee7;border-color:#d0b77b}
.output-editor:focus{outline-color:#f5dea3}
.output-warning,.editor-disclaimer,.privacy-note{color:#b4aca3}
.features-editorial{border-top-color:#8677543b}
.features-editorial .features-grid{border-color:#6c604f}
.features-editorial .feature+.feature{border-left-color:#544d42}
.features-editorial .feature-index{color:#d6bc76}
.features-editorial .feature p{color:#b6b0a5}
.features-editorial .section-heading h2 span{color:#b2aa9d}
.roadmap{
  background:linear-gradient(140deg,#2321229a,#17181d);
  border-top-color:#76674a3d
}
.roadmap h2 em{color:#ddc489}
.roadmap-flow>div,.roadmap-flow>div:first-child{
  border-top-color:#695c44;border-bottom-color:#695c44
}
.roadmap-flow>div>span{color:#dac183}
.roadmap-flow>div small{color:#b2aca2}
footer{color:#a7a19a;border-top-color:#7366493b}
.footer-logo strong{color:#e5d0a1}
/* Member library and V5 request panel: visual treatment only. */
.member-panel{
  background:linear-gradient(145deg,#252327,#1b1c21);
  border-color:#5c564a;border-radius:12px
}
.member-hero h1 em{color:#dec48a}
.member-hero p:not(.eyebrow){color:#b6ada1}
.auth-tabs{background:#1c1b1f;border-radius:8px}
.auth-tabs button{color:#b9b1a4;border-radius:7px}
.auth-tabs button[aria-pressed=true]{background:#443b2e;color:#f7edcf}
.member-fine strong{color:#ebddbb}
.product-entry{background:#1b1c22;border-color:#435e6d;border-radius:9px}
.product-entry p,.product-entry small{color:#bbb1a3}
.product-entry-actions button{
  background:#302b26;border-color:#756347;color:#eee1c6;border-radius:7px
}
.product-entry-actions button:hover{background:#473d2e}
.product-entry-actions .delete-product{
  background:#302631;border-color:#795663;color:#ffd4dc
}
.ai-studio-panel{border-color:#635944}
.ai-preview-notice{color:#c3b8a6}
.ai-studio-panel .consent-line{border-bottom-color:#554b3f;color:#e8dcca}
.ai-studio-panel .consent-line input[type=checkbox],
.v5-video-panel .consent-line input[type=checkbox]{accent-color:#e5cb88}
.v5-video-panel{border-color:#7a674e}
.v5-video-panel .panel-top h3{color:#f8f1e2}
.v5-mode span{background:#26252a;border-color:#655b48;border-radius:8px}
.v5-mode .is-selected{background:#433c2e;border-color:#e5c982}
.v5-mode strong{color:#f4ebd6}
.v5-mode small{color:#b8afa1}
.v5-selected{color:#ecdec4;background:#312c27;border-color:#766447;border-radius:7px}
.v5-video-panel input[type=file]::file-selector-button{
  background:#352f28;color:#efe4cd;border-color:#857251;border-radius:6px
}
.v5-video-panel .consent-line{border-bottom-color:#665b48;color:#e9dfcd}
.v5-order-info{background:#2a292b;border-color:#736446;border-radius:8px}
.v5-order-info span{color:#c6baa7}
@media(max-width:800px){
  .site-header{height:78px}
  .site-header .studio-parent-symbol{width:28px;height:29px;flex-basis:28px}
  .site-header .studio-product-name strong{font-size:17px}
}
@media(max-width:540px){
  .site-header{height:70px;gap:8px}
  .site-header .wordmark{gap:8px}
  .site-header .studio-parent-symbol{width:26px;height:27px;flex-basis:26px}
  .site-header .studio-product-name strong{font-size:15px}
  .site-header .studio-product-name small{font-size:7px;letter-spacing:.1em}
  .site-header .header-link{font-size:10px;padding:8px 9px;min-height:36px}
  .features-editorial .feature+.feature{border-top-color:#5d5344}
}
@media(prefers-reduced-motion:reduce){
  .editorial-canvas:before{animation:none}
}

/* Inherits what works in the YOGO SHOP premium storefront:
   a rounded hero, warm spotlight, bold Korean hierarchy, clear CTA,
   large calm sections and deep neutral surfaces — not YOGO branding. */
:root{--studio-cream:#f6f5f0;--studio-gold:#e5cb88;--studio-charcoal:#0b0d11}
body{
 background:
 radial-gradient(ellipse at 9% -5%,#bda05c12,transparent 45%),
 radial-gradient(ellipse at 97% 13%,#a9956a10,transparent 37%),
 #0b0d11;
}
.site-header{border-bottom-color:#ffffff20}
.site-header .studio-product-name strong{color:#f6f5f0}
.site-header .studio-product-name small{color:#beb8af}
.site-header .studio-product-name small span{color:#d6ff9d}
.site-header .header-link{background:#ffffff09;border:1px solid #d2bc824a;border-radius:999px}
.site-header .header-link:hover{background:#e5cb8823;color:#f5e6bc}
.site-header .header-nav{color:#c3bfb9}
.hero.hero-editorial{
 background:
  radial-gradient(circle at 88% 14%,#c4a35730,transparent 24%),
  radial-gradient(circle at 69% 77%,#b69d6c18,transparent 35%),
  linear-gradient(118deg,#22242b 5%,#18191f 59%,#2a251d 100%);
 border:1px solid #e7cb8952;
 border-radius:32px;
 padding:clamp(30px,4.5vw,67px);
 min-height:570px;
 margin-top:36px;
 box-shadow:0 24px 65px #0007;
 overflow:hidden;
 gap:clamp(10px,3vw,34px);
}
.hero.hero-editorial .hero-content{padding-top:0}
.hero-editorial .eyebrow{color:#ebcc7b}
.hero-editorial h1{
 font-size:clamp(49px,5.1vw,76px);
 line-height:1.19;letter-spacing:-.07em;
}
.hero-editorial h1 em{
 background:none;
 color:#efd48b;
 -webkit-text-fill-color:#efd48b;
}
.hero-editorial .hero-lead{font-size:15px;line-height:1.9;color:#d2cec8}
.hero-editorial .hero-cta{gap:20px}
.hero-editorial .button-primary{
 background:#e8cf83;color:#1d1a13;
 border-color:#e8cf83;
 border-radius:999px;
 min-height:52px;
 box-shadow:0 9px 26px #0003;
}
.hero-editorial .button-primary:hover{background:#fae49d;border-color:#fae49d}
.hero-editorial .studio-link-secondary{color:#eee5d1;border-color:#b3a47e}
.hero-editorial .studio-link-secondary:hover{color:#ffedbb;border-color:#ffedbb}
.editorial-canvas{
 border:1px solid #c0a46a38;
 border-radius:20px;
 background:
  linear-gradient(110deg,#27262982,#1c1c2070),
  radial-gradient(circle at 60% 45%,#b1985930,transparent 61%);
 min-height:390px;
 padding:20px;
}
.editorial-canvas:after{border-color:#e3c78024;box-shadow:0 0 0 55px #e5c68005,0 0 0 110px #e5c68005}
.editorial-canvas-top,.editorial-canvas-bottom{color:#b0a996}
.canvas-entry{min-height:85px}
.canvas-entry strong{font-size:clamp(52px,5.5vw,76px)}
.canvas-entry:nth-child(1) strong{color:#8c8d90}
.canvas-entry:nth-child(2) strong{color:#efce80;text-shadow:0 0 49px #d9b75c32}
.canvas-entry:nth-child(3) strong{-webkit-text-stroke:1px #d0b876}
.canvas-dot,.canvas-rail span{color:#d6ff9d;background:transparent}
.canvas-rail span{background:#dec67d}
.hero-bottom{border-bottom-color:#ffffff16}
.features-editorial{padding-top:100px}
.features-editorial .features-grid{border-color:#6b625147}
.features-editorial .feature{padding-top:30px}
.features-editorial .feature+.feature{border-color:#6b625147}
.features-editorial .feature h3{color:#f3f1eb}
.features-editorial .feature p{color:#b9b5ad}
.studio-section .studio-panel{
 border:1px solid #5b5548;
 border-radius:18px;
 background:linear-gradient(155deg,#1d2026,#15171c 82%);
 box-shadow:0 6px 24px #0003;
}
.studio-section .editor-panel{border-top:2px solid #e0bd71}
.studio-section .result-panel{border-top:2px solid #c1b088}
.studio-section .preview-status{border-radius:9px}
.studio-section .studio-panel input,.studio-section .studio-panel textarea,.studio-section .studio-panel select{
 border-radius:10px;background:#14161c;border-color:#504d46
}
.studio-section .concept-option{border-radius:9px}
.studio-section .concept-result{border-radius:12px}
.studio-section .button-primary{
 background:#e7d087;border-color:#e7d087;color:#201d15;
 border-radius:10px;
}
.studio-section .button-primary:hover{background:#f8e3a5;border-color:#f8e3a5}
.studio-section .eyebrow{color:#e0c47e}
.studio-section .studio-heading h2 em{color:#e7d18f}
.preview-status{background:#28261f;border-color:#635a45}
.preview-status strong{color:#f1e3c2}
.preview-status small{color:#c6baa0}
.member-panel{border-radius:18px;background:#1b1d23;border-color:#544f46}
.member-hero h1 em{color:#e7cf84}
.auth-tabs button[aria-pressed=true]{background:#514530;color:#f5e7c8}
.v5-video-panel{border-color:#695b45}
.v5-mode .is-selected{background:#40372b;border-color:#d8bc82}
@media(max-width:800px){
 .hero.hero-editorial{margin-top:25px;padding:32px;min-height:0}
 .editorial-canvas{min-height:390px}
 .canvas-entry strong{font-size:64px}
}
@media(max-width:540px){
 .hero.hero-editorial{margin-top:19px;border-radius:23px;padding:28px 18px 23px;gap:16px}
 .hero-editorial h1{font-size:clamp(40px,11vw,60px)}
 .hero-editorial .hero-lead{font-size:13px}
 .editorial-canvas{min-height:305px;height:305px;padding:13px}
 .canvas-entry{min-height:65px}
 .canvas-entry strong{font-size:clamp(38px,10vw,54px)}
 .canvas-entry i{font-size:8px}
 .studio-section .studio-panel{border-radius:14px}
}


/* Mobile hero layout HOTFIX (2026-11-04).
   Previous product-theme .hero.hero-editorial two-column rule appeared
   after the editorial mobile breakpoint, overruling 1-column layout.
   Keep product theme on desktop; stack all content on mobile. */
@media (max-width: 800px){
  .hero.hero-editorial{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:24px;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    padding:clamp(24px,5vw,38px);
    margin-top:24px;
  }
  .hero.hero-editorial .hero-content,
  .hero.hero-editorial .hero-graphic{
    min-width:0;
    width:100%;
    max-width:100%;
  }
  .hero.hero-editorial .hero-content{padding:0}
  .hero.hero-editorial .editorial-canvas{
    position:relative;
    min-width:0;
    width:100%;
    max-width:100%;
    height:auto;
    min-height:0;
    margin:0;
    overflow:hidden;
    box-sizing:border-box;
    padding:20px;
  }
  .hero.hero-editorial .editorial-canvas-center{min-width:0;width:100%;padding:12px 0}
  .hero.hero-editorial .canvas-entry{min-width:0}
  .hero.hero-editorial .canvas-entry strong{min-width:0}
}
@media (max-width: 540px){
  .hero.hero-editorial{
    gap:22px;
    margin-top:16px;
    padding:26px 18px 22px;
    border-radius:22px;
  }
  .hero.hero-editorial h1{
    font-size:clamp(34px,10.7vw,49px);
    line-height:1.19;
    margin-bottom:22px;
    overflow-wrap:break-word;
  }
  .hero.hero-editorial .eyebrow{font-size:9px;letter-spacing:.12em}
  .hero.hero-editorial .hero-lead{font-size:13px;line-height:1.82;margin-bottom:22px}
  .hero.hero-editorial .hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:17px}
  .hero.hero-editorial .hero-cta .button-primary{
    width:min(100%,340px);
    max-width:100%;
    justify-content:space-between;
    gap:16px;
    padding:14px 19px;
    min-height:50px;
  }
  .hero.hero-editorial .editorial-canvas{padding:15px;gap:6px}
  .hero.hero-editorial .editorial-canvas-top,
  .hero.hero-editorial .editorial-canvas-bottom{
    font-size:8px;letter-spacing:.06em;gap:7px
  }
  .hero.hero-editorial .canvas-entry{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:3px 8px;
    min-height:0;
    padding:11px 0;
  }
  .hero.hero-editorial .canvas-entry .canvas-index{
    min-width:0;
    grid-column:1;
    grid-row:1;
    font-size:9px;
  }
  .hero.hero-editorial .canvas-entry strong{
    grid-column:1/-1;
    grid-row:2;
    width:100%;
    text-align:left;
    font-size:clamp(35px,10.5vw,52px);
    line-height:1;
    overflow-wrap:anywhere;
  }
  .hero.hero-editorial .canvas-entry i{
    min-width:0;
    grid-column:2;
    grid-row:1;
    font-size:9px;
    white-space:normal;
    text-align:right;
  }
  .hero.hero-editorial .editorial-canvas-bottom{flex-wrap:wrap}
  .hero.hero-editorial .canvas-dot{font-size:18px}
}