/* ===== Typography System ===== */
.t-h1{font-size:clamp(28px,6vw,48px);font-weight:800;line-height:1.35;color:var(--p-text,#222)}
.t-h2{font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.35;color:var(--p-text,#222)}
.t-h3{font-size:clamp(18px,3vw,24px);font-weight:700;line-height:1.35;color:var(--p-text,#222)}
.t-body{font-size:15px;font-weight:400;line-height:1.7;color:var(--p-text-light,#666)}
.t-caption{font-size:13px;font-weight:500;line-height:1.5;color:var(--p-text-muted,#999)}

/* ===== AnatoBase Front Pages — Design Tokens =====
   ★:root 토큰(--p-*)과 공용 헤더 규칙은 /global/site-header.css로 이관됨 —
   content 비구매자 헤더와 공용. 각 pages/*.html이 pages.css '앞'에 로드한다.
   토큰·헤더 수정은 그 파일에서만. (이 파일은 var(--p-*)를 그대로 참조) */

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--p-font);color:var(--p-text);background:var(--p-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
h1,h2,h3,h4{line-height:1.25}

/* ===== Utility ===== */
.container{max-width:var(--p-max-w);margin:0 auto;padding:0 24px}
@media(max-width:768px){.container{padding:0 16px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}
.text-muted{color:var(--p-text-muted)}

/* ===== Header ===== */
/* .site-header·.header-logo·.header-nav·로고 애니메이션 → /global/site-header.css로 이관됨 */
.lang-switcher{
    padding:6px 22px 6px 8px;background:transparent;min-height:36px;
    border:1px solid var(--p-border);border-radius:var(--p-radius-sm);
    color:var(--p-text-light);font-size:.75rem;font-weight:600;
    cursor:pointer;transition:border-color var(--p-transition),color var(--p-transition);
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 6px center;
    font-family:var(--p-font);
}
.lang-switcher:hover,.lang-switcher:focus{
    color:var(--p-primary);border-color:var(--p-primary);outline:none;
}
.header-cta{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 20px;border-radius:var(--p-radius);
    background:var(--p-primary);color:#fff;
    font-size:.875rem;font-weight:600;
    transition:background var(--p-transition),transform var(--p-transition);
}
/* .header-login → /global/site-header.css로 이관됨 */
.header-cta:hover{background:var(--p-primary-hover);transform:translateY(-1px)}

/* Login page — My Account (logged in state) */
.mypage-section{
    border:1px solid var(--p-border-light,#eee);border-radius:12px;
    padding:20px;margin-bottom:20px;
}
.mypage-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;
}
.mypage-row+.mypage-row{border-top:1px solid var(--p-border-light,#eee)}
.mypage-label{font-size:.875rem;color:var(--p-text-muted,#999)}
.mypage-value{font-size:.875rem;font-weight:600;color:var(--p-text,#333)}
.mypage-plan-premium{color:var(--p-primary,#bb5d5d)}
.mypage-plan-free{color:var(--p-text-muted,#999)}
.mypage-plan-desc{
    text-align:center;font-size:.8125rem;color:var(--p-text-muted,#999);
    margin-top:8px;
}
.mypage-actions{display:flex;flex-direction:column;gap:10px}
.mypage-btn{
    display:block;text-align:center;padding:13px;border-radius:8px;
    font-size:.9375rem;font-weight:600;text-decoration:none;
    cursor:pointer;font-family:inherit;transition:all 0.2s;border:none;
}
.mypage-btn-primary{background:var(--p-primary,#bb5d5d);color:#fff}
.mypage-btn-primary:hover{opacity:0.9}
.mypage-btn-secondary{background:var(--p-text,#333);color:#fff}
.mypage-btn-secondary:hover{opacity:0.9}
.mypage-btn-outline{
    background:none;border:1px solid var(--p-border,#ddd);color:var(--p-text-muted,#999);
}
.mypage-btn-outline:hover{border-color:var(--p-text-muted,#999)}

/* My Page card */
.mypage-card{
    max-width:440px;width:100%;margin:0 auto;padding:48px 40px;
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    border-radius:var(--p-radius-xl);box-shadow:var(--p-shadow-md);
    box-sizing:border-box;
}
.mypage-card h1{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:28px}
.mypage-section-title{font-size:.875rem;font-weight:700;color:var(--p-text,#333);margin:0 0 12px}
.mypage-empty{text-align:center;font-size:.875rem;color:var(--p-text-muted,#999);padding:16px 0}
.mp-purchase-item{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 0;border-bottom:1px solid var(--p-border-light,#eee);
}
.mp-purchase-item:last-child{border-bottom:none}
.mp-purchase-info{display:flex;flex-direction:column;gap:2px}
.mp-purchase-source{font-size:.875rem;font-weight:600;color:var(--p-text,#333)}
.mp-purchase-date{font-size:.75rem;color:var(--p-text-muted,#999)}
.mp-purchase-status{font-size:.8125rem;font-weight:600;padding:4px 10px;border-radius:20px}
.mp-status-active{background:rgba(76,175,80,0.1);color:#4CAF50}
.mp-status-inactive{background:rgba(0,0,0,0.05);color:var(--p-text-muted,#999)}
@media(max-width:480px){.mypage-card{padding:32px 20px}}

/* Header my-page dropdown — removed, using mypage.html instead */
.header-my-drop{
    position:fixed;top:56px;right:16px;z-index:9999;
    background:#fff;border:1px solid var(--p-border-light,#eee);
    border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.12);
    min-width:220px;padding:8px 0;
    animation:hmdFadeIn 0.15s ease-out;
}
@keyframes hmdFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.hmd-email{padding:12px 16px;font-size:.8125rem;color:var(--p-text-muted,#999);word-break:break-all}
.hmd-divider{height:1px;background:var(--p-border-light,#eee);margin:4px 0}
.hmd-item{
    display:block;padding:10px 16px;font-size:.875rem;color:var(--p-text,#333);
    text-decoration:none;cursor:pointer;transition:background 0.15s;
    border:none;background:none;width:100%;text-align:left;font-family:inherit;
}
.hmd-item:hover{background:var(--p-bg-soft,#f8f7f6)}
.hmd-logout{color:var(--p-text-muted,#999)}
.hmd-logout:hover{color:#e74c3c}

/* Mobile menu button + Mobile nav overlay + 헤더 모바일 규칙 → /global/site-header.css로 이관됨 */
.mobile-nav .header-cta{
    margin-top:16px;justify-content:center;padding:14px;
    border-radius:var(--p-radius);font-size:1rem;
}

/* ===== Footer ===== */
.site-footer{
    background:var(--p-bg-soft);
    border-top:1px solid var(--p-border-light);
    padding:48px 0 32px;margin-top:96px;
}
.footer-top{
    display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;
    padding-bottom:32px;
}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem}
.footer-brand img{height:22px}
.footer-desc{font-size:.8125rem;color:var(--p-text-muted);margin-top:12px;line-height:1.6}
.footer-social{display:flex;gap:12px;margin-top:16px}
.footer-social a{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:var(--p-radius-sm);
    color:var(--p-text-muted);transition:color var(--p-transition),background var(--p-transition);
}
.footer-social a:hover{color:var(--p-primary);background:var(--p-primary-light)}
.footer-social svg{width:18px;height:18px}
.footer-info-col h4,.footer-links-col h4{
    font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:var(--p-text-light);margin-bottom:12px;
}
.footer-info-col p{font-size:.8125rem;color:var(--p-text-muted);line-height:1.8}
.footer-links-col{display:flex;flex-direction:column;gap:2px}
.footer-links-col a{font-size:.8125rem;color:var(--p-text-muted);transition:color var(--p-transition);padding:4px 0;display:inline-block}
.footer-links-col a:hover{color:var(--p-text)}
.footer-biz{
    border-top:1px solid var(--p-border-light);
    padding:16px 0;
}
.footer-biz p{font-size:.6875rem;color:var(--p-text-muted);line-height:1.8}
.footer-bottom{
    border-top:1px solid var(--p-border-light);
    padding-top:24px;
}
.footer-copy{font-size:.75rem;color:var(--p-text-muted);text-align:center}

@media(max-width:768px){
    .footer-top{grid-template-columns:1fr;gap:32px}
}

/* ===== Page top padding ===== */
.page-top{padding-top:calc(var(--p-header-h) + 32px)}

/* ===== Hero ===== */
.hero{
    padding:100px 0 80px;
    text-align:center;
}
.hero-badge{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.8125rem;font-weight:600;margin-bottom:24px;
}
.hero h1{
    font-size:clamp(2rem,5vw,3.25rem);
    font-weight:700;line-height:1.2;
    margin-bottom:20px;
    letter-spacing:-.02em;
}
.hero h1 em{font-style:normal;color:var(--p-primary)}
.hero p{
    font-size:clamp(1rem,2vw,1.25rem);
    color:var(--p-text-light);max-width:600px;margin:0 auto 36px;
    line-height:1.7;
}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 32px;border-radius:var(--p-radius);
    background:var(--p-primary);color:#fff;
    font-size:1rem;font-weight:600;
    transition:background var(--p-transition),transform var(--p-transition),box-shadow var(--p-transition);
}
.btn-primary:hover{background:var(--p-primary-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(187,93,93,.25)}
.btn-outline{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 32px;border-radius:var(--p-radius);
    border:1.5px solid var(--p-border);color:var(--p-text);
    font-size:1rem;font-weight:500;
    transition:border-color var(--p-transition),background var(--p-transition);
}
.btn-outline:hover{border-color:var(--p-text-muted);background:var(--p-bg-soft)}

/* ===== Sections ===== */
.section{padding:80px 0}
.section-label{
    display:inline-flex;align-items:center;gap:6px;
    font-size:13px;font-weight:500;text-transform:uppercase;
    letter-spacing:.05em;color:var(--p-primary);margin-bottom:12px;
}
.section-title{font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.35;margin-bottom:16px;letter-spacing:-.01em}
.section-desc{font-size:15px;color:var(--p-text-light);max-width:560px;line-height:1.7}
.section-header{margin-bottom:48px}
.section-header.center{text-align:center}
.section-header.center .section-desc{margin:0 auto}

/* ===== Feature Cards ===== */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.feature-card{
    padding:32px 28px;border-radius:var(--p-radius-lg);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    transition:border-color var(--p-transition),box-shadow var(--p-transition),transform var(--p-transition);
}
.feature-card:hover{border-color:var(--p-border);box-shadow:var(--p-shadow-sm);transform:translateY(-2px)}
.feature-icon{
    width:48px;height:48px;border-radius:var(--p-radius);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:20px;
}
.feature-icon svg{width:24px;height:24px}
.feature-icon.primary{background:var(--p-primary-light);color:var(--p-primary)}
.feature-icon.accent{background:var(--p-accent-light);color:var(--p-accent)}
.feature-icon.success{background:rgba(93,155,109,.1);color:var(--p-success)}
.feature-icon.warning{background:rgba(201,165,93,.1);color:var(--p-warning)}
.feature-card h3{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:8px}
.feature-card p{font-size:15px;color:var(--p-text-light);line-height:1.7}

/* ===== Preview / Browser Mockup ===== */
.preview-frame{
    max-width:900px;margin:0 auto;
    border-radius:var(--p-radius-lg);overflow:hidden;
    border:1px solid var(--p-border);
    box-shadow:var(--p-shadow-lg);
    background:var(--p-bg-card);
}
.preview-browser-bar{
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;background:var(--p-bg-soft);
    border-bottom:1px solid var(--p-border-light);
}
.preview-dots{display:flex;gap:6px}
.preview-dots span{width:10px;height:10px;border-radius:50%;background:var(--p-border)}
.preview-url{
    flex:1;margin-left:8px;padding:4px 12px;
    border-radius:var(--p-radius-sm);background:var(--p-bg-card);
    border:1px solid var(--p-border-light);
    font-size:.75rem;color:var(--p-text-muted);
}
.preview-body{position:relative;overflow:hidden}
.preview-body img{width:100%;height:auto;display:block}
.preview-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    padding:16px;
}
.preview-thumb{
    aspect-ratio:16/10;border-radius:var(--p-radius-sm);
    overflow:hidden;border:1px solid var(--p-border-light);
}
.preview-thumb img{width:100%;height:100%;object-fit:cover}
.preview-placeholder{
    aspect-ratio:16/9;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    color:var(--p-text-muted);font-size:.9375rem;
}
.preview-placeholder svg{width:48px;height:48px;opacity:.4}

/* ===== Stats ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center;padding:48px 0}
.stat-item h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--p-primary);margin-bottom:4px}
.stat-item p{font-size:.875rem;color:var(--p-text-muted)}

/* ===== CTA Banner ===== */
.cta-banner{
    padding:64px 40px;border-radius:var(--p-radius-xl);
    background:var(--p-text);color:#fff;text-align:center;
}
.cta-banner h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;margin-bottom:12px}
.cta-banner p{color:rgba(255,255,255,.7);margin-bottom:28px;font-size:1.0625rem}
.cta-banner .btn-primary{background:#fff;color:var(--p-text)}
.cta-banner .btn-primary:hover{background:var(--p-bg-soft);box-shadow:0 4px 16px rgba(0,0,0,.15)}

/* ===== Product Page — Steps ===== */
.steps{counter-reset:step}
.step-item{
    display:flex;gap:32px;align-items:flex-start;
    padding:32px 0;border-bottom:1px solid var(--p-border-light);
    counter-increment:step;
}
.step-item:last-child{border-bottom:none}
.step-num{
    flex-shrink:0;width:48px;height:48px;
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:1.125rem;font-weight:700;
}
.step-num::before{content:counter(step)}
.step-body h3{font-size:1.125rem;font-weight:600;margin-bottom:6px}
.step-body p{color:var(--p-text-light);font-size:.9375rem;line-height:1.6}

/* ===== Product — Detail Blocks ===== */
.detail-block{
    display:grid;grid-template-columns:2fr 3fr;gap:48px;align-items:center;
    padding:40px 0;border-bottom:1px solid var(--p-border-light);
}
.detail-block:last-child{border-bottom:none}
.detail-block.reverse .detail-visual{order:-1}
.detail-visual{
    aspect-ratio:4/3;border-radius:var(--p-radius-lg);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
    display:flex;align-items:center;justify-content:center;
    color:var(--p-text-muted);font-size:.875rem;
}
.detail-text h3{font-size:clamp(18px,3vw,24px);font-weight:700;line-height:1.35;margin-bottom:12px}
.detail-text p{font-size:15px;color:var(--p-text-light);line-height:1.7;margin-bottom:16px}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-tag{
    padding:4px 12px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
    font-size:.8125rem;color:var(--p-text-light);
}
@media(max-width:768px){
    .detail-block{grid-template-columns:1fr;gap:20px;padding:24px 0}
    .detail-block.reverse .detail-visual{order:0}
}

/* ===== Making Story — Placeholder Icon ===== */
.making-placeholder-icon{
    width:48px;height:48px;color:var(--p-text-muted);opacity:.5;margin-bottom:8px;
}

/* ===== Pricing ===== */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:start}
.pricing-card{
    padding:36px 28px;border-radius:var(--p-radius-lg);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.pricing-card:hover{box-shadow:var(--p-shadow-md)}
.pricing-card.featured{border-color:var(--p-primary);position:relative}
.pricing-card.featured::before{
    content:var(--i18n-recommended,'추천');position:absolute;top:-12px;left:24px;
    padding:4px 12px;border-radius:var(--p-radius-xl);
    background:var(--p-primary);color:#fff;font-size:.75rem;font-weight:600;
}
.pricing-name{font-size:1.0625rem;font-weight:600;margin-bottom:4px}
.pricing-desc{font-size:.875rem;color:var(--p-text-muted);margin-bottom:20px}
.pricing-original{font-size:1rem;color:var(--p-text-muted);text-decoration:line-through;margin-bottom:4px}
.pricing-price{font-size:2.25rem;font-weight:700;margin-bottom:4px;color:var(--p-text)}
.pricing-price span{font-size:.9375rem;font-weight:400;color:var(--p-text-muted)}
.pricing-period{font-size:.8125rem;color:var(--p-primary);font-weight:500;margin-bottom:24px}
.pricing-features{margin-bottom:28px}
.pricing-features li{
    display:flex;align-items:flex-start;gap:10px;
    padding:8px 0;font-size:.9375rem;color:var(--p-text-light);
}
.pricing-features li svg{flex-shrink:0;width:18px;height:18px;color:var(--p-success);margin-top:2px}
.pricing-btn{
    display:block;width:100%;padding:12px;border-radius:var(--p-radius);
    text-align:center;font-size:.9375rem;font-weight:600;
    transition:background var(--p-transition),color var(--p-transition);
}
.pricing-btn.primary{background:var(--p-primary);color:#fff}
.pricing-btn.primary:hover{background:var(--p-primary-hover)}
.pricing-btn.outline{border:1.5px solid var(--p-border);color:var(--p-text)}
.pricing-btn.outline:hover{background:var(--p-bg-soft);border-color:var(--p-text-muted)}

/* ===== FAQ Accordion ===== */
.faq-list{max-width:720px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--p-border-light)}
.faq-question{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:20px 0;font-size:15px;font-weight:500;text-align:left;
    color:var(--p-text);
}
.faq-question svg{flex-shrink:0;width:20px;height:20px;color:var(--p-text-muted);transition:transform var(--p-transition)}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{
    max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.faq-answer p{padding:0 0 20px;font-size:.9375rem;color:var(--p-text-light);line-height:1.8}

/* ===== Team ===== */
.team-mission{
    max-width:680px;margin:0 auto 56px;text-align:center;
}
.team-mission p{font-size:1.125rem;color:var(--p-text-light);line-height:1.8}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.team-card{
    text-align:center;padding:36px 24px;
    border-radius:var(--p-radius-lg);border:1px solid var(--p-border-light);
    transition:box-shadow var(--p-transition);background:var(--p-bg-card);
}
.team-card:hover{box-shadow:var(--p-shadow-sm)}
.team-avatar{
    width:96px;height:96px;border-radius:50%;
    background:var(--p-bg-soft);border:3px solid var(--p-border-light);
    margin:0 auto 16px;display:flex;align-items:center;justify-content:center;
    color:var(--p-text-muted);font-size:1.5rem;font-weight:700;
    overflow:hidden;
}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-card h3{font-size:1.0625rem;font-weight:600;margin-bottom:4px}
.team-card .role{font-size:.8125rem;color:var(--p-primary);font-weight:500;margin-bottom:8px}
.team-card p.bio{font-size:.8125rem;color:var(--p-text-light);line-height:1.6}

/* ===== Team — Card interaction ===== */
.team-card{cursor:pointer;position:relative}
.team-card .card-hint{
    font-size:.75rem;color:var(--p-text-muted);margin-top:10px;
    transition:color var(--p-transition);
}
.team-card:hover .card-hint{color:var(--p-primary)}
/* hidden data source for popup */
.team-card .team-popup-data{display:none}

/* ===== Team — Grid layouts ===== */
.team-grid-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
@media(max-width:768px){
    .team-grid-wide{grid-template-columns:repeat(2,1fr);gap:16px}
    .team-card{padding:24px 16px}
}
@media(max-width:420px){
    .team-grid-wide{grid-template-columns:1fr}
}

/* ===== Team — Advisor Card ===== */
.advisor-card{
    display:flex;gap:28px;align-items:flex-start;
    padding:36px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);
    background:var(--p-bg-card);cursor:pointer;
    transition:box-shadow var(--p-transition);
    max-width:720px;margin:0 auto;
}
.advisor-card:hover{box-shadow:var(--p-shadow-sm)}
.advisor-left{flex-shrink:0;text-align:center}
.advisor-left .team-avatar{width:110px;height:110px;margin:0 auto 8px}
.advisor-right{flex:1;text-align:left}
.advisor-right h3{font-size:1.125rem;font-weight:600;margin-bottom:2px}
.advisor-right .role{font-size:.8125rem;color:var(--p-primary);font-weight:500;margin-bottom:8px}
.advisor-right .bio{font-size:.875rem;color:var(--p-text-light);line-height:1.6}
.advisor-right .card-hint{
    font-size:.75rem;color:var(--p-text-muted);margin-top:10px;
    transition:color var(--p-transition);
}
.advisor-card:hover .card-hint{color:var(--p-primary)}
.advisor-card .team-popup-data{display:none}

@media(max-width:768px){
    .advisor-card{flex-direction:column;align-items:center;text-align:center;padding:28px 20px}
    .advisor-right{text-align:center}
}

/* ===== Team Popup Modal ===== */
.team-popup-overlay{
    position:fixed;inset:0;z-index:1000;
    background:rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
    padding:24px;
}
.team-popup-overlay.active{opacity:1;pointer-events:auto}

.team-popup{
    background:var(--p-bg);border-radius:var(--p-radius-xl);
    max-width:640px;width:100%;
    max-height:85vh;overflow-y:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
    transform:translateY(20px) scale(.97);
    transition:transform .3s ease;
    position:relative;
}
.team-popup-overlay.active .team-popup{transform:translateY(0) scale(1)}

/* scrollbar */
.team-popup::-webkit-scrollbar{width:6px}
.team-popup::-webkit-scrollbar-thumb{background:var(--p-border);border-radius:3px}

.team-popup-close{
    position:sticky;top:0;float:right;z-index:2;
    width:36px;height:36px;border-radius:50%;
    background:var(--p-bg);border:1px solid var(--p-border-light);
    display:flex;align-items:center;justify-content:center;
    font-size:1.125rem;color:var(--p-text-muted);cursor:pointer;
    margin:16px 16px 0 0;
    transition:background .2s ease,color .2s ease;
    box-shadow:var(--p-shadow-sm);
}
.team-popup-close:hover{background:var(--p-bg-soft);color:var(--p-text)}

/* header area */
.team-popup-header{
    text-align:center;padding:40px 32px 0;
}
.team-popup-header .team-avatar{
    width:120px;height:120px;margin:0 auto 16px;
    border-width:3px;
}
.team-popup-header h3{font-size:1.25rem;font-weight:700;margin-bottom:4px}
.team-popup-header .role{
    font-size:.875rem;color:var(--p-primary);font-weight:500;margin-bottom:12px;
}
.team-popup-header .bio{
    font-size:.9375rem;color:var(--p-text-light);line-height:1.7;
    max-width:480px;margin:0 auto;
}

/* body area */
.team-popup-body{padding:24px 32px 32px}

.team-popup-body h4{
    font-size:.875rem;font-weight:600;color:var(--p-text);
    margin-bottom:8px;margin-top:20px;
}
.team-popup-body h4:first-child{margin-top:0}
.team-popup-body p{font-size:.875rem;color:var(--p-text-light);line-height:1.7;margin-bottom:8px}
.team-popup-body ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.team-popup-body li{font-size:.875rem;color:var(--p-text-light);padding-left:16px;position:relative;line-height:1.5}
.team-popup-body li::before{content:'·';position:absolute;left:4px;color:var(--p-primary);font-weight:700}

.team-popup-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.team-popup-tag{
    padding:4px 12px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.8125rem;font-weight:500;
}

/* separator */
.team-popup-divider{
    border:none;border-top:1px solid var(--p-border-light);
    margin:24px 0;
}

/* gallery grid */
.team-popup-gallery{margin-top:4px}
.team-popup-gallery-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
}
.team-popup-gallery-grid img{
    width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:var(--p-radius);cursor:pointer;
    border:1px solid var(--p-border-light);
    transition:transform .2s ease,box-shadow .2s ease;
}
.team-popup-gallery-grid img:hover{
    transform:scale(1.04);box-shadow:var(--p-shadow-md);
}

/* photos row (for advisor — horizontal) */
.team-popup-photos-row{
    display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.team-popup-photos-row::-webkit-scrollbar{height:5px}
.team-popup-photos-row::-webkit-scrollbar-thumb{background:var(--p-border);border-radius:3px}
.team-popup-photos-row img{
    height:160px;width:auto;border-radius:var(--p-radius);
    flex-shrink:0;cursor:pointer;scroll-snap-align:start;
    border:1px solid var(--p-border-light);
    transition:transform .2s ease;
}
.team-popup-photos-row img:hover{transform:scale(1.03)}

@media(max-width:768px){
    .team-popup-overlay{padding:12px}
    .team-popup{max-height:90vh}
    .team-popup-header{padding:32px 20px 0}
    .team-popup-body{padding:20px 20px 28px}
    .team-popup-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}
    .team-popup-photos-row img{height:120px}
}

/* ===== Lightbox (image zoom) ===== */
.lightbox{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.9);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox img{
    max-width:92vw;max-height:88vh;
    border-radius:var(--p-radius);
    box-shadow:0 8px 40px rgba(0,0,0,.4);
    transform:scale(.92);transition:transform .3s ease;
}
.lightbox.active img{transform:scale(1)}
.lightbox-close{
    position:absolute;top:20px;right:24px;
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.12);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:1.375rem;cursor:pointer;
    transition:background .2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.22)}
.lightbox-caption{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.8);font-size:.875rem;
    text-align:center;max-width:80%;
}

/* ===== Legal Pages (Terms, Privacy) ===== */
.legal-page{padding-top:calc(var(--p-header-h) + 48px);padding-bottom:80px}
.legal-page .container{max-width:720px}
.legal-page h1{font-size:1.75rem;font-weight:700;margin-bottom:8px}
.legal-page .legal-date{font-size:.875rem;color:var(--p-text-muted);margin-bottom:40px}
.legal-page h2{font-size:1.25rem;font-weight:600;margin-top:40px;margin-bottom:12px;padding-top:24px;border-top:1px solid var(--p-border-light)}
.legal-page h3{font-size:1.0625rem;font-weight:600;margin-top:24px;margin-bottom:8px}
.legal-page p{font-size:.9375rem;color:var(--p-text-light);line-height:1.8;margin-bottom:12px}
.legal-page ul{margin:8px 0 16px 20px;list-style:disc}
.legal-page ul li{font-size:.9375rem;color:var(--p-text-light);line-height:1.7;margin-bottom:4px}
.legal-page ol{margin:8px 0 16px 20px;list-style:decimal}
.legal-page ol li{font-size:.9375rem;color:var(--p-text-light);line-height:1.7;margin-bottom:4px}

/* ===== Responsive ===== */
@media(max-width:768px){
    html,body{overflow-x:hidden}
    .hero{padding:72px 0 56px}
    .section{padding:56px 0}
    .features-grid{gap:16px}
    .feature-card{padding:24px 20px}
    .stats-row{grid-template-columns:repeat(2,1fr);gap:16px}
    .cta-banner{padding:48px 24px}
    .step-item{flex-direction:column;gap:16px}
    .pricing-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
    .footer-inner{flex-direction:column;align-items:center;text-align:center}
    .site-footer{margin-top:64px}
    .preview-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== Product — Problem/Solution ===== */
.problem-solution{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.problem-box,.solution-box{padding:32px;border-radius:var(--p-radius-lg)}
.problem-box{background:#fdf5f5;border:1px solid #f0d5d5}
.solution-box{background:#f3f8f5;border:1px solid #d5e8dc}
.problem-box h3,.solution-box h3{font-size:1.125rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.problem-box h3{color:#a04d4d}
.solution-box h3{color:#4a8a5c}
.problem-box ul,.solution-box ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.problem-box li,.solution-box li{font-size:.9375rem;line-height:1.6;padding-left:24px;position:relative}
.problem-box li::before{content:'✕';position:absolute;left:0;color:#bb5d5d;font-weight:600;font-size:.8125rem}
.solution-box li::before{content:'✓';position:absolute;left:0;color:#5d9b6d;font-weight:700}
@media(max-width:768px){.problem-solution{grid-template-columns:1fr;gap:16px}}

/* ===== Product — Audience Cards ===== */
.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.audience-card{
    padding:28px 24px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);text-align:center;
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.audience-card:hover{border-color:var(--p-border);box-shadow:var(--p-shadow-sm)}
.audience-emoji{font-size:2rem;margin-bottom:12px;line-height:1}
.audience-card h3{font-size:1rem;font-weight:600;margin-bottom:6px}
.audience-card p{font-size:.875rem;color:var(--p-text-light);line-height:1.5}

/* ===== Home — Team Teaser ===== */
.team-teaser{
    display:flex;align-items:center;gap:48px;
    padding:48px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    box-shadow:var(--p-shadow-sm);
}
.team-teaser-avatars{display:flex;flex-shrink:0}
.team-teaser-avatars .teaser-av{
    width:52px;height:52px;border-radius:50%;
    background:var(--p-primary-light);color:var(--p-primary);
    font-weight:700;font-size:.875rem;
    display:flex;align-items:center;justify-content:center;
    border:3px solid var(--p-bg-card);
}
.team-teaser-avatars .teaser-av+.teaser-av{margin-left:-14px}
.team-teaser-body h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.team-teaser-body p{font-size:.9375rem;color:var(--p-text-light);line-height:1.6;margin-bottom:20px}
.team-teaser .btn-outline{padding:10px 24px;font-size:.875rem}
@media(max-width:768px){
    .team-teaser{flex-direction:column;text-align:center;padding:32px 24px;gap:24px}
    .team-teaser-avatars{justify-content:center}
}

/* ===== Product — Category Tags ===== */
.category-cloud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.category-chip{
    padding:8px 18px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    font-size:.875rem;color:var(--p-text-light);font-weight:500;
    transition:border-color var(--p-transition),color var(--p-transition);
}
.category-chip:hover{border-color:var(--p-primary);color:var(--p-primary)}

/* ===== Product — Highlight List ===== */
.highlight-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.highlight-list li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:15px;color:var(--p-text-light);line-height:1.7;
}
.highlight-list li svg{flex-shrink:0;width:18px;height:18px;color:var(--p-primary);margin-top:3px}

/* ===== Product — Comparison Table ===== */
.compare-table{width:100%;border-collapse:collapse;margin-top:24px}
.compare-table th{
    text-align:left;padding:12px 16px;font-size:.8125rem;font-weight:600;
    color:var(--p-text-muted);text-transform:uppercase;letter-spacing:.04em;
    border-bottom:2px solid var(--p-border);
}
.compare-table td{
    padding:14px 16px;font-size:.9375rem;color:var(--p-text-light);
    border-bottom:1px solid var(--p-border-light);
}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .label{font-weight:500;color:var(--p-text)}
.compare-table .check{color:var(--p-success);font-weight:700}
.compare-table .cross{color:var(--p-text-muted)}

/* ===== Product — Mid CTA ===== */
.mid-cta{
    text-align:center;padding:48px 32px;
    border-radius:var(--p-radius-lg);
    background:var(--p-primary-light);border:1px solid rgba(187,93,93,.15);
}
.mid-cta h3{font-size:1.25rem;font-weight:700;margin-bottom:8px}
.mid-cta p{color:var(--p-text-light);margin-bottom:20px;font-size:.9375rem}

/* ===== Product — Category Detail Grid ===== */
.category-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:32px}
.category-detail-card{
    padding:20px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.category-detail-card:hover{border-color:var(--p-primary);box-shadow:var(--p-shadow-sm)}
.category-detail-card h4{font-size:.9375rem;font-weight:600;margin-bottom:4px}
.category-detail-card .cat-count{font-size:.75rem;color:var(--p-primary);font-weight:600;margin-bottom:8px}
.category-detail-card p{font-size:.8125rem;color:var(--p-text-light);line-height:1.55}
@media(max-width:768px){.category-detail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.category-detail-grid{grid-template-columns:1fr}}

/* ===== Product — Terminology Table ===== */
.term-table{width:100%;border-collapse:collapse;margin-top:20px}
.term-table th{
    text-align:left;padding:10px 14px;font-size:.8125rem;font-weight:600;
    color:var(--p-text-muted);letter-spacing:.03em;
    border-bottom:2px solid var(--p-border);background:var(--p-bg-soft);
}
.term-table td{
    padding:12px 14px;font-size:.875rem;color:var(--p-text-light);
    border-bottom:1px solid var(--p-border-light);
}
.term-table td:first-child{font-weight:500;color:var(--p-text)}
.term-table td.latin{font-style:italic;color:var(--p-text-muted);font-size:.8125rem}
.term-table tr:hover td{background:var(--p-primary-light)}
@media(max-width:768px){
    .term-table{font-size:.8125rem}
    .term-table th,.term-table td{padding:8px 10px}
}

/* ===== Product — Action Grid (16 movements) ===== */
.action-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:24px}
.action-item{
    padding:14px 16px;border-radius:var(--p-radius);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    text-align:center;transition:border-color var(--p-transition);
}
.action-item:hover{border-color:var(--p-primary)}
.action-item .action-ko{font-size:.9375rem;font-weight:600;margin-bottom:2px}
.action-item .action-en{font-size:.75rem;color:var(--p-text-muted)}

/* ===== Product — Screenshot Showcase ===== */
.screenshot-row{
    display:flex;gap:16px;overflow-x:auto;padding:8px 0 16px;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.screenshot-row-wrap{overflow-x:clip}
.screenshot-row::-webkit-scrollbar{height:6px}
.screenshot-row::-webkit-scrollbar-thumb{background:var(--p-border);border-radius:3px}
.screenshot-item{
    flex-shrink:0;width:280px;scroll-snap-align:start;
}
.screenshot-item img{
    width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:var(--p-radius-lg);border:1px solid var(--p-border-light);
}
.screenshot-item p{font-size:.8125rem;color:var(--p-text-muted);margin-top:8px;text-align:center}

/* ===== Product — Use Case Story ===== */
.usecase-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.usecase-card{
    padding:32px 28px;border-radius:var(--p-radius-lg);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
}
.usecase-card .usecase-icon{font-size:2rem;margin-bottom:12px;line-height:1}
.usecase-card h3{font-size:1.0625rem;font-weight:600;margin-bottom:4px}
.usecase-card .usecase-who{font-size:.8125rem;color:var(--p-primary);font-weight:500;margin-bottom:12px}
.usecase-card p{font-size:.875rem;color:var(--p-text-light);line-height:1.65}
.usecase-card .usecase-features{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.usecase-card .usecase-feat{
    padding:3px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
    font-size:.75rem;color:var(--p-text-light);
}

/* ===== Product — Feature Matrix ===== */
.matrix-table{width:100%;border-collapse:collapse}
.matrix-table th{
    padding:12px 16px;font-size:.875rem;font-weight:600;
    border-bottom:2px solid var(--p-border);text-align:center;
}
.matrix-table th:first-child{text-align:left}
.matrix-table td{
    padding:12px 16px;font-size:.875rem;color:var(--p-text-light);
    border-bottom:1px solid var(--p-border-light);text-align:center;
}
.matrix-table td:first-child{text-align:left;font-weight:500;color:var(--p-text)}
.matrix-table .plan-yes{color:var(--p-success);font-weight:700}
.matrix-table .plan-no{color:var(--p-text-muted)}
.matrix-table .plan-limited{color:var(--p-warning);font-size:.8125rem}
@media(max-width:768px){
    .matrix-table th,.matrix-table td{padding:10px 8px;font-size:.8125rem}
}

/* ===== Product — Inline Stat ===== */
.inline-stat{
    display:inline-flex;align-items:baseline;gap:6px;
    padding:4px 14px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);
}
.inline-stat strong{font-size:1.25rem;font-weight:700;color:var(--p-primary)}
.inline-stat span{font-size:.875rem;color:var(--p-text-light)}

/* ===== Product — Muscle/Bone Entry Preview ===== */
.entry-preview{
    padding:28px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    max-width:560px;
}
.entry-preview .entry-header{display:flex;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.entry-preview .entry-name{font-size:1.25rem;font-weight:700}
.entry-preview .entry-old{font-size:.875rem;color:var(--p-text-muted)}
.entry-preview .entry-latin{font-size:.875rem;color:var(--p-text-muted);font-style:italic}
.entry-preview .entry-row{
    display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--p-border-light);
    font-size:.875rem;
}
.entry-preview .entry-row:last-child{border-bottom:none}
.entry-preview .entry-label{
    flex-shrink:0;width:60px;font-weight:600;color:var(--p-text-muted);font-size:.8125rem;
    padding-top:1px;
}
.entry-preview .entry-value{color:var(--p-text-light);line-height:1.55}
.entry-preview .entry-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.entry-preview .entry-tag{
    padding:3px 10px;border-radius:var(--p-radius-xl);
    font-size:.75rem;font-weight:500;
}
.entry-preview .entry-tag.layer{background:rgba(93,125,187,.1);color:var(--p-accent)}
.entry-preview .entry-tag.action{background:var(--p-primary-light);color:var(--p-primary)}
.entry-preview .entry-tag.region{background:rgba(93,155,109,.1);color:var(--p-success)}

/* ===== Product — Learning Path ===== */
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.path-card{
    padding:28px 24px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    position:relative;
}
.path-card .path-num{
    position:absolute;top:16px;right:16px;
    font-size:2.5rem;font-weight:800;color:var(--p-border-light);line-height:1;
}
.path-card h4{font-size:1rem;font-weight:600;margin-bottom:8px}
.path-card p{font-size:.875rem;color:var(--p-text-light);line-height:1.6;margin-bottom:12px}
.path-card .path-items{list-style:none;display:flex;flex-direction:column;gap:4px}
.path-card .path-items li{
    font-size:.8125rem;color:var(--p-text-light);padding-left:16px;position:relative;line-height:1.5;
}
.path-card .path-items li::before{content:'→';position:absolute;left:0;color:var(--p-primary)}

/* ===== Product — Quote/Testimonial ===== */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quote-card{
    padding:28px 24px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    position:relative;
}
.quote-card::before{
    content:'"';position:absolute;top:16px;left:20px;
    font-size:3rem;line-height:1;color:var(--p-border-light);font-weight:700;
}
.quote-card p{font-size:.9375rem;color:var(--p-text-light);line-height:1.7;margin-bottom:16px;padding-top:24px}
.quote-card .quote-author{font-size:.8125rem;font-weight:600;color:var(--p-text)}
.quote-card .quote-role{font-size:.75rem;color:var(--p-text-muted)}

/* ===== Scroll Animations ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ===== 404 Page ===== */
.page-404{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:24px;
}
.page-404 h1{font-size:clamp(4rem,10vw,8rem);font-weight:700;color:var(--p-border);line-height:1}
.page-404 h2{font-size:1.5rem;font-weight:600;margin:16px 0 8px}
.page-404 p{color:var(--p-text-light);margin-bottom:32px}
.page-404 a{
    display:inline-flex;align-items:center;gap:6px;
    padding:12px 28px;border-radius:var(--p-radius);
    background:var(--p-primary);color:#fff;font-weight:600;
    transition:background var(--p-transition);
}
.page-404 a:hover{background:var(--p-primary-hover)}

/* ═══════════════════════════════════════════
   PRODUCT PAGE ENHANCEMENTS
   ═══════════════════════════════════════════ */

/* ===== Sticky Page TOC (Desktop) ===== */
.page-toc{
    position:fixed;top:50%;left:20px;z-index:90;
    transform:translateY(-50%);
    display:flex;flex-direction:column;gap:0;
    opacity:0;pointer-events:none;
    transition:opacity .4s ease;
}
.page-toc.visible{opacity:1;pointer-events:auto}

/* TOC Groups */
.toc-group{
    display:flex;flex-direction:column;gap:2px;
    position:relative;
}
.toc-group + .toc-group{margin-top:10px}
.toc-group-label{
    font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--p-text-muted);padding:0 10px 2px;
    opacity:0;transform:translateX(-4px);
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;
}
.page-toc:hover .toc-group-label{opacity:.7;transform:translateX(0)}

.page-toc a{
    display:flex;align-items:center;gap:10px;
    padding:6px 10px;border-radius:var(--p-radius-sm);
    font-size:.75rem;color:var(--p-text-muted);
    white-space:nowrap;
    transition:color var(--p-transition),background var(--p-transition);
}
.page-toc a:hover{color:var(--p-text);background:var(--p-bg-soft)}
.page-toc a.active{color:var(--p-primary);font-weight:600}
.page-toc .toc-dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
    background:var(--p-border);
    transition:background var(--p-transition),transform var(--p-transition);
}
.page-toc a.active .toc-dot{background:var(--p-primary);transform:scale(1.3)}
.page-toc .toc-label{
    opacity:0;transform:translateX(-4px);
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;
}
.page-toc:hover .toc-label{opacity:1;transform:translateX(0)}

/* TOC progress line per group */
.toc-group::before{
    content:'';position:absolute;left:14px;top:10px;bottom:10px;
    width:2px;background:var(--p-border-light);border-radius:1px;
    z-index:-1;
}

@media(max-width:1380px){
    .page-toc .toc-label{display:none}
    .page-toc{left:8px}
}
@media(max-width:1100px){
    .page-toc{display:none}
}

/* TOC Mobile Floating Button */
.toc-mobile-btn{
    display:none;position:fixed;bottom:24px;right:24px;z-index:95;
    width:48px;height:48px;border-radius:50%;
    background:var(--p-primary);color:#fff;
    box-shadow:0 4px 16px rgba(187,93,93,.35);
    align-items:center;justify-content:center;
    transition:transform var(--p-transition),box-shadow var(--p-transition);
}
.toc-mobile-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(187,93,93,.45)}
.toc-mobile-btn svg{width:22px;height:22px}
.toc-mobile-menu{
    display:none;position:fixed;bottom:80px;right:24px;z-index:94;
    background:var(--p-bg);border:1px solid var(--p-border-light);
    border-radius:var(--p-radius-lg);padding:12px 8px;
    box-shadow:var(--p-shadow-lg);min-width:180px;
    opacity:0;transform:translateY(8px);
    transition:opacity .25s ease,transform .25s ease;
}
.toc-mobile-menu.open{display:block;opacity:1;transform:translateY(0)}
.toc-mobile-menu a{
    display:block;padding:10px 14px;font-size:.8125rem;
    color:var(--p-text-light);border-radius:var(--p-radius-sm);
    transition:background var(--p-transition),color var(--p-transition);
}
.toc-mobile-menu a:hover,.toc-mobile-menu a.active{
    background:var(--p-primary-light);color:var(--p-primary);
}
.toc-mobile-group{
    display:block;padding:6px 14px 2px;margin-top:6px;
    font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--p-text-muted);
}
.toc-mobile-group:first-child{margin-top:0}
@media(max-width:1100px){
    .toc-mobile-btn{display:flex}
}

/* ===== Hero Visual (Browser Mockup) ===== */
.hero-visual{
    max-width:900px;margin:48px auto 0;
    border-radius:var(--p-radius-lg);overflow:hidden;
    border:1px solid var(--p-border);
    box-shadow:var(--p-shadow-lg);
    background:var(--p-bg-card);
    transform:perspective(1200px) rotateX(2deg);
    transition:transform .5s ease;
}
.hero-visual:hover{transform:perspective(1200px) rotateX(0deg)}
.hero-visual .preview-browser-bar{
    display:flex;align-items:center;gap:8px;
    padding:10px 16px;background:var(--p-bg-soft);
    border-bottom:1px solid var(--p-border-light);
}
.hero-visual .preview-dots{display:flex;gap:6px}
.hero-visual .preview-dots span{width:10px;height:10px;border-radius:50%;background:var(--p-border)}
.hero-visual .preview-url{
    flex:1;margin-left:8px;padding:4px 12px;
    border-radius:var(--p-radius-sm);background:var(--p-bg-card);
    border:1px solid var(--p-border-light);
    font-size:.75rem;color:var(--p-text-muted);
}
.hero-visual .hero-visual-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
    padding:8px;
}
.hero-visual .hero-visual-grid img{
    width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:var(--p-radius-sm);
    transition:transform .3s ease;
}
.hero-visual .hero-visual-grid img:hover{transform:scale(1.03)}
@media(max-width:768px){
    .hero-visual{margin:32px auto 0;transform:none}
    .hero-visual:hover{transform:none}
    .hero-visual .hero-visual-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===== Detail Visual Slideshow ===== */
.detail-slideshow{
    position:relative;overflow:hidden;
    aspect-ratio:4/3;border-radius:var(--p-radius-lg);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
}
.detail-slideshow img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .8s ease;
    border-radius:inherit;
}
.detail-slideshow img.slide-active{opacity:1}
.detail-slideshow .slide-dots{
    position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
    display:flex;gap:6px;z-index:2;
}
.detail-slideshow .slide-dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.1);
    cursor:pointer;transition:background .3s ease,transform .3s ease;
}
.detail-slideshow .slide-dot.active{background:#fff;transform:scale(1.2)}
/* progress bar */
.detail-slideshow .slide-progress{
    position:absolute;bottom:0;left:0;height:3px;
    background:var(--p-primary);border-radius:0 2px 0 0;
    transition:width linear;z-index:2;
}

/* ===== Trust / Logo Wall ===== */
.trust-section{text-align:center}
.trust-number{
    font-size:clamp(2rem,4vw,3rem);font-weight:800;
    color:var(--p-primary);margin-bottom:4px;
}
.trust-subtitle{font-size:1rem;color:var(--p-text-light);margin-bottom:32px}
.trust-logos{
    display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
    margin-bottom:24px;
}
.trust-logo-chip{
    padding:10px 22px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    font-size:.875rem;font-weight:500;color:var(--p-text-light);
    transition:border-color var(--p-transition),color var(--p-transition);
}
.trust-logo-chip:hover{border-color:var(--p-primary);color:var(--p-primary)}
.trust-note{font-size:.8125rem;color:var(--p-text-muted);margin-top:16px}

/* ===== Roadmap Timeline ===== */
.roadmap-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
    position:relative;
}
.roadmap-card{
    padding:24px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    position:relative;overflow:hidden;
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.roadmap-card:hover{border-color:var(--p-primary);box-shadow:var(--p-shadow-sm)}
.roadmap-card .roadmap-status{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 10px;border-radius:var(--p-radius-xl);
    font-size:.6875rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.04em;margin-bottom:12px;
}
.roadmap-card .roadmap-status.done{background:rgba(93,155,109,.12);color:var(--p-success)}
.roadmap-card .roadmap-status.progress{background:rgba(187,93,93,.1);color:var(--p-primary)}
.roadmap-card .roadmap-status.planned{background:rgba(93,125,187,.1);color:var(--p-accent)}
.roadmap-card .roadmap-status.future{background:var(--p-bg-soft);color:var(--p-text-muted)}
.roadmap-card .roadmap-status-dot{
    width:6px;height:6px;border-radius:50%;background:currentColor;
}
.roadmap-card h4{font-size:1rem;font-weight:600;margin-bottom:6px}
.roadmap-card p{font-size:.8125rem;color:var(--p-text-light);line-height:1.55}
.roadmap-card .roadmap-quarter{
    font-size:.75rem;color:var(--p-text-muted);margin-top:10px;font-weight:500;
}

/* ===== Price Hint Badge ===== */
.price-hint-row{
    display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
    margin-top:20px;
}
.price-hint{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:16px 28px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    min-width:140px;
    transition:border-color var(--p-transition);
}
.price-hint:hover{border-color:var(--p-primary)}
.price-hint .plan-name{font-size:.75rem;font-weight:600;color:var(--p-text-muted);text-transform:uppercase;letter-spacing:.04em}
.price-hint .plan-price{font-size:1.5rem;font-weight:700;color:var(--p-text)}
.price-hint .plan-price span{font-size:.8125rem;font-weight:400;color:var(--p-text-muted)}
.price-hint.featured{border-color:var(--p-primary)}
.price-hint.featured .plan-price{color:var(--p-primary)}

/* ===== Counter Animation ===== */
.count-up{
    display:inline-block;
    font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════
   INTERACTIVE DEMO PANELS (Light theme)
   ═══════════════════════════════════════════ */

/* --- Shared Demo Shell --- */
.demo-panel{
    aspect-ratio:4/3;border-radius:var(--p-radius-lg);
    background:var(--p-bg);border:1px solid var(--p-border);
    overflow:hidden;position:relative;
    font-family:'Open Sans',sans-serif;
    box-shadow:var(--p-shadow-lg);
}
.demo-panel *{box-sizing:border-box}
.demo-topbar{
    display:flex;align-items:center;gap:6px;
    padding:10px 14px;background:var(--p-bg-soft);
    border-bottom:1px solid var(--p-border-light);
}
.demo-topbar-dot{width:8px;height:8px;border-radius:50%}
.demo-topbar-dot.r{background:#ff5f57}
.demo-topbar-dot.y{background:#ffbd2e}
.demo-topbar-dot.g{background:#28c840}
.demo-topbar-title{margin-left:auto;font-size:.625rem;color:var(--p-text-muted);letter-spacing:.04em;font-weight:600}
.demo-body{padding:16px;height:calc(100% - 36px);display:flex;flex-direction:column;gap:10px}

/* --- Search Demo --- */
.demo-search-bar{
    display:flex;align-items:center;gap:8px;
    padding:10px 14px;border-radius:8px;
    background:var(--p-bg);border:1.5px solid var(--p-border);
    transition:border-color .3s ease,box-shadow .3s ease;
}
.demo-search-bar.focus{border-color:var(--p-primary);box-shadow:0 0 0 3px rgba(187,93,93,.1)}
.demo-search-bar svg{width:16px;height:16px;color:var(--p-text-muted);flex-shrink:0}
.demo-search-text{
    font-size:.8125rem;color:var(--p-text);white-space:nowrap;
    min-height:1.2em;
}
.demo-search-text .typed{color:var(--p-text)}
.demo-search-text .chosung{color:var(--p-primary);font-weight:700}
.demo-cursor{
    display:inline-block;width:1.5px;height:14px;
    background:var(--p-primary);margin-left:1px;
    animation:blink-cursor .6s step-end infinite;
    vertical-align:middle;
}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}

.demo-search-hint{
    font-size:.625rem;color:var(--p-text-muted);padding:0 4px;
    transition:opacity .3s ease;
}

.demo-results{
    flex:1;display:flex;flex-direction:column;gap:6px;
    overflow:hidden;
}
.demo-result{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:8px;
    background:var(--p-bg-soft);border:1px solid transparent;
    opacity:0;transform:translateY(6px);
    transition:opacity .3s ease,transform .3s ease,border-color .3s ease,background .3s ease;
}
.demo-result.show{opacity:1;transform:translateY(0)}
.demo-result.highlight{border-color:var(--p-primary);background:var(--p-primary-light)}
.demo-result-icon{
    width:32px;height:32px;border-radius:6px;
    background:var(--p-bg-hover);display:flex;align-items:center;justify-content:center;
    font-size:.75rem;flex-shrink:0;
}
.demo-result-icon svg{width:16px;height:16px}
.demo-result-icon.muscle{background:rgba(187,93,93,.1);color:var(--p-primary)}
.demo-result-icon.bone{background:rgba(93,125,187,.1);color:var(--p-accent)}
.demo-result-icon.video{background:rgba(93,155,109,.1);color:var(--p-success)}
.demo-result-text{flex:1;min-width:0}
.demo-result-name{font-size:.8125rem;color:var(--p-text);font-weight:600}
.demo-result-name mark{background:none;color:var(--p-primary);font-weight:700}
.demo-result-sub{font-size:.6875rem;color:var(--p-text-muted);margin-top:1px}
.demo-result-badge{
    padding:2px 8px;border-radius:10px;font-size:.5625rem;font-weight:600;
    flex-shrink:0;
}
.demo-result-badge.muscle-badge{background:rgba(187,93,93,.1);color:var(--p-primary)}
.demo-result-badge.bone-badge{background:rgba(93,125,187,.1);color:var(--p-accent)}
.demo-result-badge.video-badge{background:rgba(93,155,109,.1);color:var(--p-success)}

/* --- Save/Folder Demo --- */
.demo-save-body{height:calc(100% - 36px);display:flex;flex-direction:column}
.demo-tab-bar{
    display:flex;gap:0;border-bottom:1px solid var(--p-border-light);
    padding:0 12px;
}
.demo-tab{
    padding:8px 14px;font-size:.6875rem;color:var(--p-text-muted);font-weight:500;
    border-bottom:2px solid transparent;
    transition:color .3s ease,border-color .3s ease;
}
.demo-tab.active{color:var(--p-primary);border-color:var(--p-primary)}

.demo-list{
    flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:4px;
    overflow:hidden;position:relative;
}
.demo-list-item{
    display:flex;align-items:center;gap:8px;
    padding:8px 10px;border-radius:6px;
    background:var(--p-bg);
    transition:background .3s ease;
    position:relative;
}
.demo-list-item.selected{background:var(--p-primary-light);outline:1px solid rgba(187,93,93,.2)}
.demo-list-dot{
    width:5px;height:5px;border-radius:50%;flex-shrink:0;
    background:transparent;
    transition:background .4s ease,transform .4s ease;
}
.demo-list-dot.saved{background:var(--p-primary);transform:scale(1.3)}
.demo-list-dot.memo{background:var(--p-accent)}
.demo-list-name{
    flex:1;font-size:.75rem;color:var(--p-text-light);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.demo-list-heart{
    width:18px;height:18px;flex-shrink:0;cursor:default;
    color:var(--p-border);transition:color .3s ease,transform .3s ease;
}
.demo-list-heart.filled{color:#e25555;transform:scale(1.25)}
.demo-list-heart svg{width:100%;height:100%}
.demo-list-memo-icon{
    width:16px;height:16px;flex-shrink:0;color:var(--p-border);
    transition:color .3s ease;
}
.demo-list-memo-icon.active{color:var(--p-accent)}
.demo-list-memo-icon svg{width:100%;height:100%}

/* Memo popup */
.demo-memo-popup{
    position:absolute;right:12px;bottom:12px;
    width:180px;padding:10px 12px;
    background:var(--p-bg);border:1px solid var(--p-border);
    border-radius:8px;box-shadow:var(--p-shadow-md);
    opacity:0;transform:translateY(8px) scale(.95);
    transition:opacity .3s ease,transform .3s ease;
    pointer-events:none;z-index:2;
}
.demo-memo-popup.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.demo-memo-popup-title{font-size:.625rem;color:var(--p-accent);font-weight:600;margin-bottom:6px}
.demo-memo-text{
    font-size:.6875rem;color:var(--p-text-light);line-height:1.5;
    min-height:2.5em;
}
.demo-memo-text .memo-cursor{
    display:inline-block;width:1px;height:10px;
    background:var(--p-accent);
    animation:blink-cursor .5s step-end infinite;
    vertical-align:middle;
}

/* Folder row */
.demo-folder-row{
    display:flex;align-items:center;gap:6px;
    padding:6px 10px;border-radius:6px;
}
.demo-folder-arrow{
    width:12px;height:12px;color:var(--p-text-muted);flex-shrink:0;
    transition:transform .3s ease;
}
.demo-folder-arrow.open{transform:rotate(90deg)}
.demo-folder-arrow svg{width:100%;height:100%}
.demo-folder-name{font-size:.75rem;color:var(--p-text-light);font-weight:600}
.demo-folder-count{font-size:.625rem;color:var(--p-text-muted);margin-left:auto}

/* Toast */
.demo-toast{
    position:absolute;bottom:12px;left:50%;transform:translateX(-50%) translateY(20px);
    padding:6px 16px;border-radius:20px;
    background:var(--p-primary);color:#fff;
    font-size:.6875rem;font-weight:600;
    opacity:0;transition:opacity .3s ease,transform .3s ease;
    white-space:nowrap;z-index:3;
}
.demo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- Layer Toggle Demo --- */
.demo-layer-stage{
    flex:1;display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;border-radius:8px;
    background:var(--p-bg-soft);
}
.demo-layer-img{
    position:absolute;width:80%;max-height:90%;object-fit:contain;
    transition:opacity .6s ease;border-radius:6px;
}
.demo-layer-img.hide{opacity:0}
.demo-layer-controls{
    display:flex;gap:8px;flex-wrap:wrap;
}
.demo-toggle{
    display:flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:20px;
    background:var(--p-bg);border:1px solid var(--p-border);
    font-size:.6875rem;font-weight:500;color:var(--p-text-light);
    transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.demo-toggle .toggle-switch{
    width:28px;height:16px;border-radius:8px;
    background:var(--p-border);position:relative;
    transition:background .3s ease;
}
.demo-toggle .toggle-switch::after{
    content:'';position:absolute;top:2px;left:2px;
    width:12px;height:12px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:transform .3s ease;
}
.demo-toggle.on{border-color:var(--p-primary);color:var(--p-primary)}
.demo-toggle.on .toggle-switch{background:var(--p-primary)}
.demo-toggle.on .toggle-switch::after{transform:translateX(12px)}

/* Speed control */
.demo-speed{
    display:flex;align-items:center;gap:4px;
    padding:4px 10px;border-radius:20px;
    background:var(--p-bg);border:1px solid var(--p-border);
    font-size:.625rem;color:var(--p-text-muted);
}
.demo-speed-val{color:var(--p-primary);font-weight:700;min-width:26px;text-align:center}

/* --- Dictionary Demo --- */
.demo-dict-entry{
    flex:1;display:flex;flex-direction:column;gap:8px;
    padding:4px 0;overflow:hidden;
}
.demo-dict-header{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.demo-dict-name{font-size:1rem;font-weight:700;color:var(--p-text);transition:opacity .3s ease}
.demo-dict-old{font-size:.75rem;color:var(--p-text-muted);transition:opacity .3s ease}
.demo-dict-latin{font-size:.6875rem;color:var(--p-text-muted);font-style:italic}
.demo-dict-row{
    display:flex;gap:8px;padding:6px 0;
    border-bottom:1px solid var(--p-border-light);
    font-size:.75rem;
}
.demo-dict-label{flex-shrink:0;width:36px;font-weight:600;color:var(--p-text-muted);font-size:.6875rem}
.demo-dict-value{color:var(--p-text-light);line-height:1.5;transition:opacity .3s ease}

/* Slider mock */
.demo-slider-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.demo-slider-label{font-size:.625rem;color:var(--p-text-muted);font-weight:600;width:50px}
.demo-slider-track{
    flex:1;height:6px;border-radius:3px;
    background:var(--p-border-light);position:relative;overflow:visible;
}
.demo-slider-fill{
    height:100%;border-radius:3px;
    background:var(--p-primary);
    transition:width .6s ease;
}
.demo-slider-thumb{
    position:absolute;top:50%;transform:translate(-50%,-50%);
    width:14px;height:14px;border-radius:50%;
    background:#fff;border:2px solid var(--p-primary);
    box-shadow:0 1px 4px rgba(0,0,0,.15);
    transition:left .6s ease;
}
.demo-dict-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.demo-dict-tag{
    padding:2px 8px;border-radius:10px;font-size:.5625rem;font-weight:600;
    transition:opacity .3s ease,transform .3s ease;
}
.demo-dict-tag.layer{background:rgba(93,125,187,.1);color:var(--p-accent)}
.demo-dict-tag.action{background:rgba(187,93,93,.1);color:var(--p-primary)}
.demo-dict-tag.region{background:rgba(93,155,109,.1);color:var(--p-success)}

/* --- Terminology Switch Demo --- */
.demo-term-list{flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.demo-term-row{
    display:grid;grid-template-columns:1fr 1fr .8fr;gap:8px;
    padding:7px 10px;border-radius:6px;
    font-size:.6875rem;
    background:var(--p-bg);
    transition:background .3s ease;
}
.demo-term-row.head{
    font-weight:600;color:var(--p-text-muted);font-size:.5625rem;
    text-transform:uppercase;letter-spacing:.04em;
    background:transparent;padding-bottom:4px;
    border-bottom:1px solid var(--p-border-light);
}
.demo-term-new{color:var(--p-text);font-weight:600;transition:opacity .3s ease,color .3s ease}
.demo-term-old{color:var(--p-text-muted);transition:opacity .3s ease,color .3s ease}
.demo-term-latin{color:var(--p-text-muted);font-style:italic;font-size:.625rem}
.demo-term-row.highlight{background:var(--p-primary-light)}
.demo-term-row .swapped-new{color:var(--p-text-muted);font-weight:400}
.demo-term-row .swapped-old{color:var(--p-text);font-weight:600}
.demo-term-switch{
    display:flex;align-items:center;gap:8px;
    padding:6px 0;
}
.demo-term-switch-label{font-size:.625rem;color:var(--p-text-muted);font-weight:500}
.demo-term-switch-label.active{color:var(--p-primary);font-weight:600}
.demo-term-switch-track{
    width:32px;height:18px;border-radius:9px;
    background:var(--p-primary);position:relative;cursor:default;
    transition:background .3s ease;
}
.demo-term-switch-track.off{background:var(--p-accent)}
.demo-term-switch-track::after{
    content:'';position:absolute;top:2px;left:2px;
    width:14px;height:14px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:transform .3s ease;
}
.demo-term-switch-track.off::after{transform:translateX(14px)}

@media(max-width:768px){
    .demo-panel{aspect-ratio:3/4}
}

/* ===== Product — Professor Card ===== */
.prof-card{
    display:flex;gap:32px;align-items:center;
    padding:36px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    max-width:760px;margin:0 auto;
    transition:box-shadow var(--p-transition);
}
.prof-card:hover{box-shadow:var(--p-shadow-sm)}
.prof-avatar{
    flex-shrink:0;width:100px;height:100px;border-radius:50%;
    background:var(--p-bg-soft);border:3px solid var(--p-border-light);
    display:flex;align-items:center;justify-content:center;
    color:var(--p-text-muted);font-size:1.75rem;font-weight:700;
    overflow:hidden;
}
.prof-avatar img{width:100%;height:100%;object-fit:cover}
.prof-info h3{font-size:1.125rem;font-weight:700;margin-bottom:2px}
.prof-info .role{font-size:.8125rem;color:var(--p-primary);font-weight:500;margin-bottom:10px}
.prof-info p{font-size:.875rem;color:var(--p-text-light);line-height:1.6;margin-bottom:8px}
.prof-credentials{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.prof-credentials span{
    padding:3px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.75rem;font-weight:500;
}
.prof-link{
    display:inline-flex;align-items:center;gap:4px;
    font-size:.8125rem;color:var(--p-primary);font-weight:500;
    margin-top:10px;transition:opacity var(--p-transition);
}
.prof-link:hover{opacity:.7}
@media(max-width:600px){
    .prof-card{flex-direction:column;text-align:center;padding:28px 20px}
    .prof-credentials{justify-content:center}
}

/* ===== Product — Artist Mini Grid ===== */
.artist-mini-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;
    margin-top:32px;
}
.artist-mini{
    padding:24px 16px;border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);background:var(--p-bg-card);
    text-align:center;
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.artist-mini:hover{border-color:var(--p-primary);box-shadow:var(--p-shadow-sm)}
.artist-mini .artist-mini-avatar{
    width:64px;height:64px;border-radius:50%;
    background:var(--p-bg-soft);border:2px solid var(--p-border-light);
    display:flex;align-items:center;justify-content:center;
    color:var(--p-text-muted);font-size:1.125rem;font-weight:700;
    margin:0 auto 12px;overflow:hidden;
}
.artist-mini .artist-mini-avatar img{width:100%;height:100%;object-fit:cover}
.artist-mini h4{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:2px}
.artist-mini .artist-role{font-size:.75rem;color:var(--p-primary);font-weight:500;margin-bottom:6px}
.artist-mini .artist-area{font-size:.8125rem;color:var(--p-text-light);line-height:1.5}
.artist-mini .artist-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
.artist-mini .artist-tags span{
    padding:2px 8px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
    font-size:.6875rem;color:var(--p-text-light);
}
@media(max-width:768px){
    .artist-mini-grid{grid-template-columns:1fr;gap:8px}
    .artist-mini{padding:12px 16px;display:grid;grid-template-columns:52px 1fr auto;gap:0 12px;align-items:center;text-align:left}
    .artist-mini .artist-mini-avatar{width:52px;height:52px;margin:0;grid-row:1/4;grid-column:1}
    .artist-mini h4{font-size:14px;margin:0;line-height:1.3;grid-column:2}
    .artist-mini .artist-role{font-size:.7rem;margin:0;line-height:1.3;grid-column:2;color:var(--p-text-light)}
    .artist-mini .artist-area{font-size:.65rem;margin:0;line-height:1.3;grid-column:2;color:var(--p-text-muted)}
    .artist-mini .artist-tags{grid-column:3;grid-row:1/4;justify-content:center;align-items:center;align-self:center;margin:0;gap:3px;flex-direction:column}
    .artist-mini .artist-tags span{font-size:.6rem;padding:1px 6px}
}

/* ═══════════════════════════════════════════
   NEW FEATURES — 7 Additions
   ═══════════════════════════════════════════ */

/* ===== Stats Enhancement ===== */
.stat-icon{
    width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 10px;
    background:var(--p-primary-light);color:var(--p-primary);
    transition:transform .3s ease;
}
.stat-icon svg{width:22px;height:22px}
.stat-icon.muscle{background:rgba(187,93,93,.1);color:#c45555}
.stat-icon.bone{background:rgba(93,125,187,.1);color:var(--p-accent)}
.stat-icon.category{background:rgba(93,155,109,.1);color:var(--p-success)}
.stat-icon.action{background:rgba(201,165,93,.1);color:var(--p-warning)}
.stat-icon.frames{background:rgba(120,100,180,.1);color:#7864b4}
.stat-item:hover .stat-icon{transform:scale(1.15) translateY(-2px)}
.stat-item{transition:transform .3s ease}
.stat-item:hover{transform:translateY(-4px)}

/* ===== FAQ Filter ===== */
.faq-filter-wrap{margin-bottom:24px;max-width:720px;margin-left:auto;margin-right:auto}
.faq-filter-bar{
    display:flex;align-items:center;gap:10px;
    padding:12px 18px;border-radius:var(--p-radius-lg);
    background:var(--p-bg);border:1.5px solid var(--p-border);
    transition:border-color .3s ease,box-shadow .3s ease;
}
.faq-filter-bar:focus-within{border-color:var(--p-primary);box-shadow:0 0 0 3px rgba(187,93,93,.1)}
.faq-filter-bar svg{width:18px;height:18px;color:var(--p-text-muted);flex-shrink:0}
.faq-filter-input{
    flex:1;border:none;outline:none;background:none;
    font-size:.9375rem;font-family:var(--p-font);color:var(--p-text);
}
.faq-filter-input::placeholder{color:var(--p-text-muted)}
.faq-filter-count{font-size:.75rem;color:var(--p-text-muted);white-space:nowrap}
.faq-item.faq-hidden{display:none}
.faq-no-results{
    text-align:center;padding:32px;color:var(--p-text-muted);font-size:.9375rem;
    display:none;
}
.faq-no-results.show{display:block}

/* ===== Text Overlay Demo ===== */
.demo-text-stage{
    flex:1;position:relative;overflow:hidden;border-radius:8px;
    background:var(--p-bg-soft);
}
.demo-text-bg{
    width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
.demo-text-label{
    position:absolute;
    padding:3px 10px;border-radius:4px;
    background:rgba(187,93,93,.85);color:#fff;
    font-size:.625rem;font-weight:600;
    opacity:0;transform:translateY(6px);
    transition:opacity .4s ease,transform .4s ease;
    pointer-events:none;white-space:nowrap;
}
.demo-text-label.visible{opacity:1;transform:translateY(0)}
.demo-text-arrow{
    position:absolute;top:40%;left:30%;width:80px;height:30px;
    overflow:visible;
}
.demo-text-arrow line{transition:stroke-dashoffset 1s ease}
.demo-text-arrow polygon{transition:opacity .3s ease .8s}
.demo-text-arrow.visible line{stroke-dashoffset:0}
.demo-text-arrow.visible polygon{opacity:1}
.demo-text-circle{
    position:absolute;top:48%;left:48%;width:50px;height:50px;
    overflow:visible;
}
.demo-text-circle circle{transition:stroke-dashoffset 1s ease .3s}
.demo-text-circle.visible circle{stroke-dashoffset:0}
.demo-text-controls{
    display:flex;gap:8px;align-items:center;
}
.demo-text-lang{
    margin-left:auto;display:flex;
    border-radius:14px;overflow:hidden;
    border:1px solid var(--p-border);
}
.dt-lang-btn{
    padding:4px 10px;font-size:.625rem;font-weight:600;
    color:var(--p-text-muted);cursor:default;
    transition:background .3s ease,color .3s ease;
}
.dt-lang-btn.active{background:var(--p-primary);color:#fff}

/* ===== Mobile/Responsive Demo ===== */
.demo-device-wrap{
    position:relative;width:100%;height:calc(100% - 36px);
    display:flex;align-items:center;justify-content:center;
}
.demo-device{
    position:absolute;
    border-radius:12px;background:var(--p-bg);
    border:2px solid var(--p-border);
    overflow:hidden;
    opacity:0;transform:scale(.85);
    transition:opacity .5s ease,transform .5s ease;
    pointer-events:none;
}
.demo-device.active{opacity:1;transform:scale(1);pointer-events:auto}

/* Phone */
.demo-device.phone{width:110px;height:200px;border-radius:16px}
.dm-notch{
    width:40px;height:6px;border-radius:3px;
    background:var(--p-border);margin:6px auto 4px;
}
.dm-screen{position:relative;overflow:hidden;height:calc(100% - 16px)}
.dm-screen img{width:100%;height:100%;object-fit:cover}
.dm-bottomsheet{
    position:absolute;bottom:0;left:0;right:0;
    background:rgba(255,255,255,.95);backdrop-filter:blur(4px);
    padding:8px 10px;font-size:.5rem;color:var(--p-text);font-weight:600;
    border-top:1px solid var(--p-border-light);
}
.dm-handle{
    width:28px;height:3px;border-radius:2px;
    background:var(--p-border);margin:0 auto 6px;
}

/* Tablet */
.demo-device.tablet{width:180px;height:140px;border-radius:10px}
.demo-device.tablet .dm-screen{height:100%}
.dm-split{display:flex;height:100%}
.dm-sidebar{
    width:60px;background:var(--p-bg-soft);
    border-right:1px solid var(--p-border-light);
    padding:6px 4px;display:flex;flex-direction:column;gap:2px;
}
.dm-sb-item{
    padding:4px 6px;font-size:.4375rem;border-radius:4px;
    color:var(--p-text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:background .3s ease;
}
.dm-sb-item.active{background:var(--p-primary-light);color:var(--p-primary);font-weight:600}
.dm-split img{flex:1;object-fit:cover;min-width:0}

/* Desktop */
.demo-device.desktop{width:240px;height:160px;border-radius:8px}
.dm-browser-bar{
    display:flex;gap:4px;padding:5px 8px;
    background:var(--p-bg-soft);border-bottom:1px solid var(--p-border-light);
}
.dm-browser-bar span{width:6px;height:6px;border-radius:50%;background:var(--p-border)}
.demo-device.desktop .dm-screen{height:calc(100% - 22px)}
.dm-split.wide .dm-sidebar{width:70px;padding:6px}

/* Device tabs */
.demo-device-tabs{
    position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
    display:flex;gap:4px;z-index:2;
}
.dm-tab{
    width:32px;height:26px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    background:var(--p-bg);border:1px solid var(--p-border);
    color:var(--p-text-muted);cursor:default;
    transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.dm-tab svg{width:14px;height:14px}
.dm-tab.active{border-color:var(--p-primary);color:var(--p-primary);background:var(--p-primary-light)}

/* ===== Before/After Slider ===== */
.ba-slider-wrap{max-width:600px;margin:0 auto}
.ba-container{
    position:relative;overflow:hidden;
    border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border);
    box-shadow:var(--p-shadow-lg);
    cursor:ew-resize;
    user-select:none;-webkit-user-select:none;
}
.ba-img{width:100%;display:block}
.ba-before{
    position:absolute;top:0;left:0;bottom:0;width:50%;
    overflow:hidden;
}
.ba-before .ba-img{
    position:absolute;top:0;left:0;
    width:var(--ba-full-w,600px);max-width:none;
}
.ba-handle{
    position:absolute;top:0;bottom:0;left:50%;
    width:4px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;z-index:2;
}
.ba-handle-line{flex:1;width:2px;background:rgba(255,255,255,.8)}
.ba-handle-btn{
    width:36px;height:36px;border-radius:50%;
    background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);
    display:flex;align-items:center;justify-content:center;gap:0;
    flex-shrink:0;
}
.ba-handle-btn svg{width:14px;height:14px;color:var(--p-primary)}
.ba-label{
    position:absolute;bottom:12px;
    padding:4px 12px;border-radius:20px;
    background:rgba(0,0,0,.6);color:#fff;
    font-size:.6875rem;font-weight:600;
    pointer-events:none;
}
.ba-label-left{left:12px}
.ba-label-right{right:12px}

/* ===== Interactive Body Map ===== */
.body-map-wrap{
    position:relative;
    max-width:400px;margin:0 auto;
    min-height:500px;
}
.bm-body-silhouette{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;opacity:.5;
}
.bm-body-silhouette svg{height:100%;width:auto}
.body-map-grid{position:relative;z-index:2;height:500px}
.bm-region{position:absolute;cursor:pointer}
.bm-dot{
    position:absolute;width:14px;height:14px;border-radius:50%;
    background:var(--p-primary);border:3px solid #fff;
    box-shadow:0 2px 6px rgba(187,93,93,.3);
    transform:translate(-50%,-50%);
    transition:transform .3s ease,box-shadow .3s ease;
}
.bm-region:hover .bm-dot{
    transform:translate(-50%,-50%) scale(1.4);
    box-shadow:0 2px 12px rgba(187,93,93,.5);
}
.bm-label{
    position:absolute;
    top:calc(100% + 4px);left:50%;transform:translateX(-50%);
    white-space:nowrap;font-size:.625rem;color:var(--p-text-muted);
    font-weight:600;pointer-events:none;
    transition:color .3s ease;
}
.bm-region:hover .bm-label{color:var(--p-primary)}
.bm-region{
    width:0;height:0;
}
.bm-region .bm-dot{top:0;left:0}
.bm-tooltip{
    position:absolute;z-index:10;
    padding:12px 16px;border-radius:var(--p-radius);
    background:var(--p-bg);border:1px solid var(--p-border);
    box-shadow:var(--p-shadow-md);
    opacity:0;pointer-events:none;
    transform:translateY(4px);
    transition:opacity .2s ease,transform .2s ease;
    white-space:nowrap;
}
.bm-tooltip.visible{opacity:1;transform:translateY(0)}
.bm-tooltip strong{font-size:.875rem;color:var(--p-text)}
.bm-tt-row{
    display:flex;gap:6px;font-size:.75rem;color:var(--p-text-light);
    margin-top:4px;
}
.bm-tt-row strong{color:var(--p-primary);font-weight:700}

/* ===== Frame Scrubber ===== */
.frame-scrubber-wrap{max-width:600px;margin:0 auto;text-align:center}
.frame-scrubber-stage{
    position:relative;border-radius:var(--p-radius-lg);overflow:hidden;
    border:1px solid var(--p-border);box-shadow:var(--p-shadow-lg);
    background:var(--p-bg-soft);margin-bottom:20px;
}
.frame-scrubber-stage img{width:100%;display:block;transition:opacity .3s ease}
.fs-frame-badge{
    position:absolute;top:12px;right:12px;
    padding:4px 12px;border-radius:20px;
    background:rgba(0,0,0,.6);color:#fff;
    font-size:.6875rem;font-weight:600;
}
.frame-scrubber-bar{padding:0 20px}
.fs-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:8px;border-radius:4px;
    background:var(--p-border-light);outline:none;
    cursor:pointer;
}
.fs-range::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:24px;height:24px;border-radius:50%;
    background:var(--p-primary);border:3px solid #fff;
    box-shadow:0 2px 8px rgba(187,93,93,.3);
    cursor:grab;
}
.fs-range::-moz-range-thumb{
    width:24px;height:24px;border-radius:50%;
    background:var(--p-primary);border:3px solid #fff;
    box-shadow:0 2px 8px rgba(187,93,93,.3);
    cursor:grab;
}
.fs-ticks{
    display:flex;justify-content:space-between;
    padding:8px 4px 0;
}
.fs-tick{
    font-size:.6875rem;color:var(--p-text-muted);font-weight:500;
    transition:color .3s ease,font-weight .3s ease;
    cursor:pointer;
}
.fs-tick.active{color:var(--p-primary);font-weight:700}
.fs-hint{
    margin-top:12px;font-size:.75rem;color:var(--p-text-muted);
    animation:fs-pulse 2s ease-in-out infinite;
}
@keyframes fs-pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ===== Learning Flow Track ===== */
.flow-track{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    position:relative;margin-top:32px;
}
.flow-step{text-align:center;padding:0 16px;position:relative}
.flow-thumb{
    position:relative;width:110px;height:110px;margin:0 auto 16px;
    border-radius:50%;overflow:hidden;
    border:3px solid var(--p-border);
    transition:border-color .4s ease,box-shadow .4s ease;
}
.flow-step.active .flow-thumb{
    border-color:var(--p-primary);
    box-shadow:0 0 0 4px var(--p-primary-light);
}
.flow-thumb img{width:100%;height:100%;object-fit:cover}
.flow-badge{
    position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
    padding:2px 10px;border-radius:10px;
    background:var(--p-primary);color:#fff;
    font-size:.5625rem;font-weight:700;letter-spacing:.03em;
}
.flow-connector{
    position:absolute;top:55px;right:-50%;width:100%;height:2px;
    background:var(--p-border);z-index:-1;
}
.flow-step:last-child .flow-connector{display:none}
.flow-step h4{font-size:1rem;font-weight:700;margin-bottom:6px}
.flow-step p{font-size:.8125rem;color:var(--p-text-light);line-height:1.55;margin-bottom:8px}
.flow-count{font-size:.75rem;color:var(--p-primary);font-weight:600}
@media(max-width:768px){
    .flow-track{grid-template-columns:repeat(2,1fr);gap:28px}
    .flow-connector{display:none}
}
@media(max-width:420px){
    .flow-track{grid-template-columns:1fr}
}

/* ===== Video Card Grid ===== */
.vcard-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
    gap:20px;margin-top:32px;
}
.vcard{
    border-radius:var(--p-radius-lg);background:var(--p-bg-card);
    border:1px solid var(--p-border-light);overflow:hidden;
    transition:border-color var(--p-transition),box-shadow var(--p-transition),transform var(--p-transition);
}
.vcard:hover{
    border-color:var(--p-primary);box-shadow:var(--p-shadow-md);transform:translateY(-3px);
}
.vcard-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--p-bg-soft)}
.vcard-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.vcard:hover .vcard-thumb img{transform:scale(1.04)}
.vcard-frames{
    position:absolute;bottom:8px;right:8px;
    display:flex;align-items:center;gap:4px;
    padding:3px 8px;border-radius:10px;
    background:rgba(0,0,0,.55);color:#fff;
    font-size:.625rem;font-weight:600;
}
.vcard-frames svg{width:12px;height:12px}
.vcard-info{padding:14px 16px 16px}
.vcard-cat{
    display:inline-block;padding:2px 8px;border-radius:10px;
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.625rem;font-weight:600;margin-bottom:6px;
}
.vcard-title{font-size:.875rem;font-weight:600;color:var(--p-text);line-height:1.4}
@media(max-width:768px){
    .vcard-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:420px){
    .vcard-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .vcard-info{padding:10px 12px 12px}
    .vcard-title{font-size:.8125rem}
}

/* ===== Playback Demo ===== */
.demo-playback-stage{
    flex:1;display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;border-radius:8px;background:var(--p-bg-soft);
}
.demo-playback-stage img{width:80%;max-height:90%;object-fit:contain;border-radius:6px}
.dp-frame-num{
    position:absolute;top:8px;right:8px;
    padding:3px 10px;border-radius:10px;
    background:rgba(0,0,0,.55);color:#fff;font-size:.625rem;font-weight:600;
}
.dp-direction{
    position:absolute;top:8px;left:8px;
    padding:3px 10px;border-radius:10px;
    background:rgba(0,0,0,.55);color:#fff;font-size:.625rem;font-weight:600;
    transition:opacity .3s ease;
}
.demo-playback-controls{
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.dp-speed-group{display:flex;gap:4px;flex:1}
.dp-speed-btn{
    padding:5px 10px;border-radius:14px;
    background:var(--p-bg);border:1px solid var(--p-border);
    font-size:.625rem;font-weight:600;color:var(--p-text-muted);
    cursor:default;
    transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.dp-speed-btn.active{
    border-color:var(--p-primary);color:var(--p-primary);background:var(--p-primary-light);
}

/* ===== Region Tabs (Layer Gallery) ===== */
.region-tabs{
    display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:32px;
}
.region-tab{
    padding:8px 18px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    font-size:.875rem;font-weight:500;color:var(--p-text-light);
    cursor:pointer;transition:border-color .3s,color .3s,background .3s;
}
.region-tab.active{border-color:var(--p-primary);color:var(--p-primary);background:var(--p-primary-light)}
.region-tab:hover{border-color:var(--p-primary);color:var(--p-primary)}

/* ===== Layer Strip ===== */
.layer-strip{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    max-width:800px;margin:0 auto;
}
.layer-strip-item{
    text-align:center;border-radius:var(--p-radius-lg);overflow:hidden;
    border:2px solid var(--p-border-light);
    transition:border-color .3s,box-shadow .3s;cursor:pointer;
}
.layer-strip-item.active{border-color:var(--p-primary);box-shadow:0 0 0 3px var(--p-primary-light)}
.layer-strip-item img{width:100%;aspect-ratio:1;object-fit:cover}
.layer-strip-label{
    display:block;padding:8px;font-size:.8125rem;font-weight:600;color:var(--p-text-light);
}
.layer-strip-item.active .layer-strip-label{color:var(--p-primary)}
@media(max-width:768px){.layer-strip{grid-template-columns:repeat(2,1fr)}}

/* ===== Resolution Compare ===== */
.res-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.res-card{
    border-radius:var(--p-radius-lg);border:1px solid var(--p-border-light);
    background:var(--p-bg-card);overflow:hidden;text-align:center;
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.res-card.featured{border-color:var(--p-primary);box-shadow:0 0 0 2px var(--p-primary-light)}
.res-device-label{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px;font-size:.875rem;font-weight:600;
}
.res-preview{aspect-ratio:1;overflow:hidden}
.res-preview img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.res-card:hover .res-preview img{transform:scale(1.08)}
.res-specs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:12px 16px}
.res-spec-item{
    padding:3px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);font-size:.75rem;color:var(--p-text-light);
}
@media(max-width:768px){.res-compare{grid-template-columns:1fr;max-width:360px}}

/* ===== Origin / Insertion Points ===== */
.oi-point{position:absolute;display:flex;align-items:center;gap:6px;z-index:2}
.oi-dot{
    width:12px;height:12px;border-radius:50%;
    border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);flex-shrink:0;
}
.oi-dot.origin{background:var(--p-primary)}
.oi-dot.insertion{background:var(--p-accent)}
.oi-label{
    padding:2px 8px;border-radius:4px;font-size:.5625rem;font-weight:600;
    color:#fff;white-space:nowrap;
}
.oi-point.origin .oi-label{background:var(--p-primary)}
.oi-point.insertion .oi-label{background:var(--p-accent)}

/* ===== Category Spotlight ===== */
.spotlight-card{
    border-radius:var(--p-radius-lg);border:1px solid var(--p-border-light);
    background:var(--p-bg-card);padding:28px;margin-bottom:24px;
}
.spotlight-info{margin-bottom:16px}
.spotlight-info h3{font-size:1.25rem;font-weight:700;margin:6px 0 8px}
.spotlight-info p{font-size:15px;color:var(--p-text-light);line-height:1.7;margin-bottom:12px}
.spotlight-stats{display:flex;gap:16px}
.spotlight-stats .inline-stat{font-size:.875rem}
.spotlight-thumbs{
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px;
}
.spotlight-thumbs img{
    width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--p-radius);
    border:1px solid var(--p-border-light);
}
.spotlight-muscles{display:flex;flex-wrap:wrap;gap:6px}
.spotlight-muscles span{
    padding:3px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);font-size:.75rem;color:var(--p-text-light);
}
.spotlight-muscles .text-muted{color:var(--p-text-muted)}
@media(max-width:768px){.spotlight-thumbs{grid-template-columns:repeat(3,1fr)}}

/* ===== Category Cloud ===== */
.category-cloud{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.category-chip{
    padding:6px 16px;border-radius:var(--p-radius-xl);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    font-size:.8125rem;color:var(--p-text-light);
    transition:border-color var(--p-transition),color var(--p-transition);
}
.category-chip:hover{border-color:var(--p-primary);color:var(--p-primary)}

/* ===== Video Card Popup ===== */
.vcard{cursor:pointer}

/* 오버레이 (기존 앱 mobile-popup-wrapper 패턴) */
.vcard-popup-overlay{
    display:flex;position:fixed;inset:0;z-index:200;
    flex-direction:column;align-items:center;justify-content:center;
    padding:20px;
    background:rgba(0,0,0,0);
    backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
    opacity:0;visibility:hidden;
    transition:background .3s ease,opacity .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease,visibility .3s;
    pointer-events:none;
}
.vcard-popup-overlay.active{
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:1;visibility:visible;
    pointer-events:auto;
}

/* 팝업 카드 (기존 앱 video-popup 패턴) */
@keyframes vcardPopupPop{
    0%{opacity:0;transform:scale(.8)}
    100%{opacity:1;transform:scale(1)}
}
@keyframes vcardPopupClose{
    0%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(.8)}
}
.vcard-popup{
    display:none;position:relative;width:90%;max-width:560px;
    background:var(--p-bg);border-radius:var(--p-radius-lg);
    box-shadow:var(--p-shadow-lg);overflow:hidden;
}
.vcard-popup.active{
    display:block;
    animation:vcardPopupPop .3s cubic-bezier(.34,1.56,.64,1);
}
.vcard-popup.closing{
    display:block;
    animation:vcardPopupClose .25s cubic-bezier(.4,0,.2,1) forwards;
}

.vcard-popup-close{
    position:absolute;top:12px;right:12px;z-index:2;
    width:32px;height:32px;border-radius:50%;
    background:rgba(0,0,0,.4);color:#fff;font-size:1.25rem;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .2s;border:none;
}
.vcard-popup-close:hover{background:rgba(0,0,0,.6)}

/* 메인 재생 영역 */
.vcard-popup-player{
    position:relative;width:100%;aspect-ratio:1;
    background:#000;overflow:hidden;
}
.vcard-popup-player img{
    width:100%;height:100%;object-fit:cover;display:block;
}

/* 프레임 썸네일 스트립 */
.vcard-popup-frames{
    display:grid;grid-template-columns:repeat(7,1fr);gap:2px;
    background:var(--p-bg-soft);padding:2px;
}
.vcard-popup-frames img{
    width:100%;aspect-ratio:1;object-fit:cover;
    cursor:pointer;opacity:.5;transition:opacity .2s;
}
.vcard-popup-frames img:hover{opacity:.8}
.vcard-popup-frames img.active{opacity:1;outline:2px solid var(--p-primary);outline-offset:-2px}

.vcard-popup-info{padding:16px 20px 20px}
.vcard-popup-info h3{font-size:1.125rem;font-weight:700;margin:6px 0 8px}
.vcard-popup-info p{font-size:.9375rem;color:var(--p-text-light);line-height:1.6}
@media(max-width:600px){
    .vcard-popup{width:95%;max-width:none}
    .vcard-popup-frames{grid-template-columns:repeat(7,1fr)}
}

/* ═══════════════════════════════════════════════════
   CHECKOUT FLOW — Step Indicator
   ═══════════════════════════════════════════════════ */
.checkout-steps{
    background:var(--p-bg-soft);border-bottom:1px solid var(--p-border-light);
    padding:20px 0;margin-top:var(--p-header-h);
}
.checkout-steps-list{
    display:flex;justify-content:center;align-items:center;
    list-style:none;gap:0;
}
.checkout-step{display:flex;align-items:center;gap:8px}
.checkout-step+.checkout-step::before{
    content:'';display:block;width:48px;height:2px;
    background:var(--p-border);margin:0 12px;transition:background var(--p-transition);
}
.checkout-step.done+.checkout-step::before{background:var(--p-primary)}
.checkout-step-num{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:.8125rem;font-weight:600;
    background:var(--p-bg);border:2px solid var(--p-border);color:var(--p-text-muted);
    transition:all var(--p-transition);flex-shrink:0;
}
.checkout-step-num svg{width:16px;height:16px}
.checkout-step.active .checkout-step-num{
    border-color:var(--p-primary);background:var(--p-primary);color:#fff;
}
.checkout-step.done .checkout-step-num{
    border-color:var(--p-primary);background:var(--p-primary);color:#fff;
}
.checkout-step-label{
    font-size:.8125rem;font-weight:500;color:var(--p-text-muted);
    transition:color var(--p-transition);
}
.checkout-step.active .checkout-step-label{color:var(--p-text);font-weight:600}
.checkout-step.done .checkout-step-label{color:var(--p-text-light)}

/* ===== Checkout — Shared ===== */
.checkout-page{padding:48px 0 80px}

/* ===== 404 Error Page ===== */
.error-page{
    min-height:calc(100vh - 120px);
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--p-header-h) + 48px) 0 80px;
}
.error-content{text-align:center}
.error-code{
    font-size:clamp(6rem,15vw,10rem);font-weight:800;
    color:var(--p-primary);line-height:1;letter-spacing:-.04em;
    opacity:.15;margin-bottom:-20px;
}
.error-title{font-size:1.5rem;font-weight:700;margin-bottom:12px}
.error-desc{font-size:1rem;color:var(--p-text-light);margin-bottom:32px;line-height:1.6}
.error-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Auth page (login only — no step indicator) */
.auth-page{
    min-height:calc(100vh - 120px);
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--p-header-h) + 48px) 0 80px;
}
.auth-page .container{width:100%}

/* ═══════════════════════════════════════════════════
   CHECKOUT FLOW — Auth / Login
   ═══════════════════════════════════════════════════ */
.auth-card{
    max-width:440px;width:100%;margin:0 auto;padding:48px 40px;
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    border-radius:var(--p-radius-xl);box-shadow:var(--p-shadow-md);
    box-sizing:border-box;
}
.auth-card h1{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:4px}
.auth-subtitle{text-align:center;color:var(--p-text-muted);font-size:.9375rem;margin-bottom:28px}

.social-login-group{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.social-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:12px;border-radius:var(--p-radius);
    font-size:.9375rem;font-weight:500;font-family:var(--p-font);
    border:1px solid var(--p-border);cursor:pointer;
    transition:box-shadow var(--p-transition),transform var(--p-transition);
}
.social-btn:hover{box-shadow:var(--p-shadow-sm);transform:translateY(-1px)}
.social-btn svg{width:20px;height:20px;flex-shrink:0}
.social-google{background:#fff;color:#333;border-color:#dadce0}
.social-kakao{background:#FEE500;color:#191919;border-color:#FEE500}
.social-naver{background:#03C75A;color:#fff;border-color:#03C75A}
.social-apple{background:#000;color:#fff;border-color:#000}

.auth-divider{
    display:flex;align-items:center;gap:12px;margin:24px 0;
    color:var(--p-text-muted);font-size:.8125rem;
}
.auth-divider::before,.auth-divider::after{
    content:'';flex:1;height:1px;background:var(--p-border-light);
}

.auth-form{margin-bottom:20px}
.form-group{margin-bottom:16px}
.form-group label{
    display:block;font-size:.8125rem;font-weight:600;
    color:var(--p-text);margin-bottom:6px;
}
.form-group input{
    width:100%;padding:12px 14px;
    border:1.5px solid var(--p-border);border-radius:var(--p-radius);
    font-size:.9375rem;font-family:var(--p-font);color:var(--p-text);
    background:var(--p-bg);
    transition:border-color var(--p-transition),box-shadow var(--p-transition);
}
.form-group input::placeholder{color:var(--p-text-muted)}
.form-group input:focus{
    outline:none;border-color:var(--p-primary);
    box-shadow:0 0 0 3px rgba(187,93,93,.1);
}
.auth-submit{
    width:100%;padding:14px;font-size:1rem;font-weight:600;
    border:none;border-radius:var(--p-radius);cursor:pointer;
    background:var(--p-primary);color:#fff;font-family:var(--p-font);
    transition:background var(--p-transition);
}
.auth-submit:hover{background:var(--p-primary-hover)}

.auth-email-display{
    padding:10px 14px;border-radius:var(--p-radius);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);
    font-size:.9375rem;color:var(--p-text);margin-bottom:16px;
    display:flex;align-items:center;gap:8px;
}
.auth-email-display::before{
    content:'';display:block;width:18px;height:18px;flex-shrink:0;
    background:var(--p-primary);border-radius:50%;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
    mask-size:contain;-webkit-mask-size:contain;
}
.auth-forgot{text-align:center;font-size:.8125rem;color:var(--p-text-muted);margin-top:12px}
.auth-forgot a{color:var(--p-primary);text-decoration:none}
.auth-forgot a:hover{text-decoration:underline}
.auth-back{
    display:flex;align-items:center;gap:4px;margin-top:16px;
    background:none;border:none;cursor:pointer;
    font-size:.8125rem;color:var(--p-text-muted);font-family:var(--p-font);
    transition:color var(--p-transition);
}
.auth-back:hover{color:var(--p-text)}
.auth-done-check{margin:8px 0 20px;text-align:center}
.auth-done-check .checkmark{width:64px;height:64px}
.auth-done-text{text-align:center;font-size:1rem;color:var(--p-text);font-weight:500}

/* ═══════════════════════════════════════════════════
   CHECKOUT FLOW — Select Plan
   ═══════════════════════════════════════════════════ */
.billing-toggle{
    display:flex;align-items:center;justify-content:center;
    gap:12px;margin-bottom:40px;
}
.billing-label{
    font-size:.9375rem;font-weight:500;color:var(--p-text-muted);
    transition:color var(--p-transition);
}
.billing-label.active{color:var(--p-text);font-weight:600}
.billing-save{
    display:inline-block;padding:2px 8px;border-radius:var(--p-radius-xl);
    background:rgba(93,155,109,.12);color:var(--p-success);
    font-size:.75rem;font-weight:600;margin-left:4px;
}
.billing-switch{
    position:relative;width:44px;height:24px;border-radius:12px;
    background:var(--p-border);cursor:pointer;border:none;
    transition:background var(--p-transition);
}
.billing-switch.on{background:var(--p-primary)}
.billing-switch-thumb{
    position:absolute;top:2px;left:2px;width:20px;height:20px;
    border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:transform var(--p-transition);pointer-events:none;
}
.billing-switch.on .billing-switch-thumb{transform:translateX(20px)}

.plan-select-grid{
    display:grid;grid-template-columns:1fr;
    gap:16px;align-items:start;margin-bottom:40px;
    max-width:600px;margin-left:auto;margin-right:auto;
}
.plan-card{
    padding:36px 28px;border-radius:var(--p-radius-lg);
    background:var(--p-bg-card);border:2px solid var(--p-border-light);
    cursor:pointer;text-align:center;
    transition:border-color var(--p-transition),box-shadow var(--p-transition),transform var(--p-transition);
}
.plan-card:hover{box-shadow:var(--p-shadow-md);transform:translateY(-2px)}
.plan-card.selected{
    border-color:var(--p-primary);
    box-shadow:0 0 0 3px rgba(187,93,93,.12),var(--p-shadow-md);
}
.plan-card.featured{position:relative;border-color:var(--p-primary)}
.plan-card.featured::before{
    content:var(--i18n-recommended,'추천');position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    padding:4px 14px;border-radius:var(--p-radius-xl);
    background:var(--p-primary);color:#fff;font-size:.75rem;font-weight:600;
}
.plan-name{font-size:1.125rem;font-weight:700;margin-bottom:4px}
.plan-desc{font-size:.875rem;color:var(--p-text-light);margin-bottom:20px}
.plan-price{font-size:2rem;font-weight:700;margin-bottom:4px}
.plan-price span{font-size:.875rem;font-weight:400;color:var(--p-text-light)}
.plan-period{font-size:.8125rem;color:var(--p-text-muted);margin-bottom:24px}
.plan-features{list-style:none;text-align:left;margin-bottom:24px}
.plan-features li{
    display:flex;align-items:center;gap:8px;
    font-size:.875rem;color:var(--p-text-light);padding:6px 0;
}
.plan-features li svg{width:16px;height:16px;color:var(--p-success);flex-shrink:0}
.plan-select-btn{
    display:inline-block;width:100%;padding:12px;border-radius:var(--p-radius);
    font-size:.9375rem;font-weight:600;text-align:center;cursor:pointer;
    border:1.5px solid var(--p-primary);font-family:var(--p-font);
    transition:all var(--p-transition);
}
.plan-select-btn.outline{background:transparent;color:var(--p-primary)}
.plan-select-btn.outline:hover{background:var(--p-primary-light)}
.plan-select-btn.primary{background:var(--p-primary);color:#fff;border-color:var(--p-primary)}
.plan-select-btn.primary:hover{background:var(--p-primary-hover)}

.checkout-actions{text-align:center;margin-top:16px}
.checkout-next{
    display:inline-flex;align-items:center;gap:6px;
    padding:14px 48px;font-size:1rem;font-weight:600;
    border:none;border-radius:var(--p-radius);cursor:pointer;
    background:var(--p-primary);color:#fff;text-decoration:none;
    font-family:var(--p-font);transition:background var(--p-transition);
}
.checkout-next:hover{background:var(--p-primary-hover)}

/* ═══════════════════════════════════════════════════
   CHECKOUT FLOW — Payment
   ═══════════════════════════════════════════════════ */
.checkout-layout{
    display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;
}
.checkout-form h2{font-size:1.25rem;font-weight:700;margin-bottom:24px}

.pay-tabs{display:flex;gap:8px;margin-bottom:24px}
.pay-tab{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:12px;border-radius:var(--p-radius);
    border:1.5px solid var(--p-border);font-size:.875rem;font-weight:500;
    color:var(--p-text-light);cursor:pointer;background:var(--p-bg);
    font-family:var(--p-font);
    transition:border-color var(--p-transition),background var(--p-transition),color var(--p-transition);
}
.pay-tab:hover{border-color:var(--p-text-muted)}
.pay-tab.active{
    border-color:var(--p-primary);background:var(--p-primary-light);
    color:var(--p-primary);font-weight:600;
}
.pay-tab svg{width:18px;height:18px}
.pay-panel{display:none}
.pay-panel.active{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.pay-redirect-msg{
    text-align:center;padding:48px 20px;
    color:var(--p-text-light);font-size:.9375rem;line-height:1.7;
}
.pay-redirect-msg svg{width:48px;height:48px;color:var(--p-text-muted);margin-bottom:16px}

.order-summary{
    padding:28px;border-radius:var(--p-radius-lg);
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    box-shadow:var(--p-shadow-sm);position:sticky;top:calc(var(--p-header-h) + 100px);
}
.order-summary h3{font-size:1.125rem;font-weight:700;margin-bottom:20px}
.order-plan{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.order-plan-name{font-size:1rem;font-weight:600}
.order-plan-badge{
    padding:2px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-primary);color:#fff;font-size:.6875rem;font-weight:600;
}
.order-line{
    display:flex;justify-content:space-between;padding:8px 0;
    font-size:.875rem;color:var(--p-text-light);
}
.order-line.total{font-weight:700;font-size:1rem;color:var(--p-text);padding-top:12px}
.order-divider{border-top:1px solid var(--p-border-light);margin:8px 0}
.order-note{font-size:.8125rem;color:var(--p-text-muted);margin-top:8px}
.order-pay-btn{
    width:100%;margin-top:20px;padding:14px;font-size:1rem;font-weight:600;
    border:none;border-radius:var(--p-radius);cursor:pointer;
    background:var(--p-primary);color:#fff;font-family:var(--p-font);
    transition:background var(--p-transition);
}
.order-pay-btn:hover{background:var(--p-primary-hover)}
.order-secure{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:12px;font-size:.75rem;color:var(--p-text-muted);
}
.order-secure svg{width:14px;height:14px}

/* ═══════════════════════════════════════════════════
   CHECKOUT FLOW — Complete
   ═══════════════════════════════════════════════════ */
.complete-card{
    max-width:520px;margin:0 auto;padding:48px 36px;text-align:center;
    background:var(--p-bg-card);border:1px solid var(--p-border-light);
    border-radius:var(--p-radius-xl);box-shadow:var(--p-shadow-md);
}
.complete-check{margin-bottom:24px}
.checkmark{
    width:80px;height:80px;border-radius:50%;display:block;margin:0 auto;
    stroke-width:2;stroke:var(--p-success);stroke-miterlimit:10;
}
.checkmark-circle{
    stroke-dasharray:166;stroke-dashoffset:166;stroke:var(--p-success);fill:none;
    animation:checkmark-circle-anim .6s cubic-bezier(.65,0,.45,1) forwards;
}
.checkmark-check{
    stroke-dasharray:48;stroke-dashoffset:48;stroke:var(--p-success);fill:none;
    stroke-width:3;stroke-linecap:round;
    animation:checkmark-check-anim .3s cubic-bezier(.65,0,.45,1) .6s forwards;
}
@keyframes checkmark-circle-anim{to{stroke-dashoffset:0}}
@keyframes checkmark-check-anim{to{stroke-dashoffset:0}}

.complete-card h1{font-size:1.5rem;font-weight:700;margin-bottom:8px}
.complete-subtitle{color:var(--p-text-light);font-size:.9375rem;margin-bottom:0}
.complete-summary{
    margin:28px 0;padding:20px;border-radius:var(--p-radius);
    background:var(--p-bg-soft);border:1px solid var(--p-border-light);text-align:left;
}
.complete-summary-row{
    display:flex;justify-content:space-between;padding:8px 0;font-size:.9375rem;
}
.complete-summary-row+.complete-summary-row{border-top:1px solid var(--p-border-light)}
.complete-actions{display:flex;flex-direction:column;align-items:center;gap:12px}
.complete-actions .btn-primary{
    padding:14px 40px;font-size:1rem;text-decoration:none;
}
.complete-receipt{
    font-size:.875rem;color:var(--p-text-muted);text-decoration:underline;
    transition:color var(--p-transition);
}
.complete-receipt:hover{color:var(--p-text)}

/* ===== Checkout — Mobile Responsive ===== */
@media(max-width:768px){
    .checkout-steps-list{gap:0}
    .checkout-step-label{display:none}
    .checkout-step+.checkout-step::before{width:32px;margin:0 8px}
    .auth-card{padding:28px 20px;margin:0 auto;max-width:calc(100% - 32px)}
    .plan-select-grid{grid-template-columns:1fr}
    .checkout-layout{grid-template-columns:1fr}
    .order-summary{order:-1;position:static}
    .pay-tabs{flex-wrap:wrap}
    .complete-card{padding:36px 20px;margin:0 16px}
}

/* ===== Stories Hub — Card Grid ===== */
.stories-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;
}
.story-card{
    border-radius:var(--p-radius-lg);border:1px solid var(--p-border-light);
    background:var(--p-bg-card);overflow:hidden;
    transition:border-color var(--p-transition),box-shadow var(--p-transition),transform var(--p-transition);
    display:flex;flex-direction:column;
}
.story-card:hover{border-color:var(--p-border);box-shadow:var(--p-shadow-md);transform:translateY(-3px)}
.story-card-visual{
    aspect-ratio:16/9;background:var(--p-bg-soft);
    display:flex;align-items:center;justify-content:center;
    border-bottom:1px solid var(--p-border-light);overflow:hidden;position:relative;
}
.story-card-visual img{width:100%;height:100%;object-fit:cover}
.story-card-icon{
    width:64px;height:64px;color:var(--p-text-muted);opacity:.35;
}
.story-card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.story-card-tag{
    display:inline-flex;align-self:flex-start;
    padding:3px 10px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.75rem;font-weight:600;margin-bottom:10px;
}
.story-card-body h3{font-size:1.125rem;font-weight:700;margin-bottom:8px;line-height:1.35}
.story-card-body p{font-size:.875rem;color:var(--p-text-light);line-height:1.65;flex:1}
.story-card-link{
    display:inline-flex;align-items:center;gap:4px;
    font-size:.8125rem;font-weight:600;color:var(--p-primary);
    margin-top:16px;transition:gap var(--p-transition);
}
.story-card:hover .story-card-link{gap:8px}
@media(max-width:768px){
    .stories-grid{grid-template-columns:1fr}
}

/* ===== Story Detail Page ===== */
.story-hero{
    padding:120px 0 64px;text-align:center;
    background:var(--p-bg-soft);border-bottom:1px solid var(--p-border-light);
}
.story-hero .story-tag{
    display:inline-flex;padding:5px 14px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.8125rem;font-weight:600;margin-bottom:20px;
}
.story-hero h1{
    font-size:clamp(1.75rem,4.5vw,2.75rem);font-weight:700;
    line-height:1.25;margin-bottom:16px;letter-spacing:-.02em;
}
.story-hero h1 em{font-style:normal;color:var(--p-primary)}
.story-hero .story-subtitle{
    font-size:clamp(1rem,2vw,1.1875rem);color:var(--p-text-light);
    max-width:620px;margin:0 auto;line-height:1.7;
}

/* Story body — article flow */
.story-body{max-width:720px;margin:0 auto;padding:64px 24px 80px}
.story-body p{font-size:1.0625rem;color:var(--p-text-light);line-height:1.85;margin-bottom:24px}
.story-body p.lead{font-size:1.1875rem;color:var(--p-text);font-weight:500;line-height:1.8}
.story-body h2{
    font-size:1.5rem;font-weight:700;margin-top:56px;margin-bottom:16px;
    padding-top:32px;border-top:1px solid var(--p-border-light);
}
.story-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.story-body h3{font-size:1.1875rem;font-weight:600;margin-top:32px;margin-bottom:12px}
.story-body ul,.story-body ol{margin:0 0 24px 20px}
.story-body ul{list-style:disc}
.story-body ol{list-style:decimal}
.story-body li{font-size:1rem;color:var(--p-text-light);line-height:1.75;margin-bottom:6px}
.story-body strong{color:var(--p-text);font-weight:600}

/* Pull quote */
.story-quote{
    margin:48px 0;padding:32px 40px;
    border-left:4px solid var(--p-primary);
    background:var(--p-bg-soft);border-radius:0 var(--p-radius-lg) var(--p-radius-lg) 0;
}
.story-quote p{
    font-size:1.1875rem;font-weight:500;color:var(--p-text);
    line-height:1.75;margin-bottom:0;font-style:italic;
}
.story-quote cite{
    display:block;margin-top:12px;font-size:.875rem;
    color:var(--p-text-muted);font-style:normal;font-weight:500;
}

/* Big number highlight */
.story-numbers{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:20px;margin:48px 0;padding:40px;
    background:var(--p-bg-soft);border-radius:var(--p-radius-lg);
    border:1px solid var(--p-border-light);text-align:center;
}
.story-number h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:var(--p-primary);margin-bottom:4px}
.story-number p{font-size:.8125rem;color:var(--p-text-muted)}

/* Image placeholder in story */
.story-image{
    margin:40px 0;border-radius:var(--p-radius-lg);overflow:hidden;
    border:1px solid var(--p-border-light);
}
.story-image img{width:100%;height:auto;display:block}
.story-image-placeholder{
    aspect-ratio:16/9;background:var(--p-bg-soft);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    color:var(--p-text-muted);font-size:.875rem;
}
.story-image-placeholder svg{width:40px;height:40px;opacity:.35}
.story-image figcaption{
    padding:12px 16px;font-size:.8125rem;color:var(--p-text-muted);
    text-align:center;background:var(--p-bg-soft);
    border-top:1px solid var(--p-border-light);
}

/* Highlight box */
.story-highlight{
    margin:40px 0;padding:28px 32px;
    border-radius:var(--p-radius-lg);
    background:var(--p-primary-light);border:1px solid rgba(187,93,93,.12);
}
.story-highlight h3{font-size:1.0625rem;font-weight:700;color:var(--p-primary);margin-bottom:8px;margin-top:0}
.story-highlight p{font-size:.9375rem;color:var(--p-text);line-height:1.7;margin-bottom:0}

/* Timeline in story */
.story-timeline{margin:48px 0;position:relative;padding-left:32px}
.story-timeline::before{
    content:'';position:absolute;left:7px;top:4px;bottom:4px;
    width:2px;background:var(--p-border);
}
.story-timeline-item{position:relative;margin-bottom:32px}
.story-timeline-item:last-child{margin-bottom:0}
.story-timeline-item::before{
    content:'';position:absolute;left:-32px;top:6px;
    width:16px;height:16px;border-radius:50%;
    background:var(--p-primary);border:3px solid var(--p-bg);
    box-shadow:0 0 0 2px var(--p-primary);
}
.story-timeline-item h4{font-size:1rem;font-weight:600;margin-bottom:4px}
.story-timeline-item p{font-size:.9375rem;color:var(--p-text-light);line-height:1.7;margin-bottom:0}

/* Comparison columns in story */
.story-compare{
    display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0;
}
.story-compare-col{padding:28px;border-radius:var(--p-radius-lg)}
.story-compare-col.before{background:#fdf5f5;border:1px solid #f0d5d5}
.story-compare-col.after{background:#f3f8f5;border:1px solid #d5e8dc}
.story-compare-col h3{font-size:1rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.story-compare-col.before h3{color:#a04d4d}
.story-compare-col.after h3{color:#4a8a5c}
.story-compare-col p{font-size:.9375rem;line-height:1.7;margin-bottom:0}
.story-compare-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.story-compare-col li{font-size:.9375rem;line-height:1.6;padding-left:22px;position:relative}
.story-compare-col.before li::before{content:'✕';position:absolute;left:0;color:#bb5d5d;font-weight:600;font-size:.8125rem}
.story-compare-col.after li::before{content:'✓';position:absolute;left:0;color:#5d9b6d;font-weight:700}

/* Story page CTA */
.story-cta{
    margin:56px 0 0;padding:48px 40px;border-radius:var(--p-radius-xl);
    background:var(--p-text);color:#fff;text-align:center;
}
.story-cta h2{font-size:1.5rem;font-weight:700;margin-bottom:10px}
.story-cta p{color:rgba(255,255,255,.7);margin-bottom:24px;font-size:1rem}
.story-cta .btn-primary{background:#fff;color:var(--p-text)}
.story-cta .btn-primary:hover{background:var(--p-bg-soft)}

/* Story nav (prev/next) */
.story-nav{
    display:flex;justify-content:space-between;gap:16px;
    margin-top:48px;padding-top:32px;
    border-top:1px solid var(--p-border-light);
}
.story-nav a{
    display:flex;flex-direction:column;gap:4px;
    font-size:.875rem;color:var(--p-text-light);
    transition:color var(--p-transition);
    max-width:45%;
}
.story-nav a:hover{color:var(--p-primary)}
.story-nav a span{font-size:.75rem;color:var(--p-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.story-nav a.next{text-align:right;margin-left:auto}

/* Full-width break section in story */
.story-full-break{
    margin:56px -24px;padding:64px 24px;
    background:var(--p-bg-soft);border-top:1px solid var(--p-border-light);
    border-bottom:1px solid var(--p-border-light);text-align:center;
}
.story-full-break h2{font-size:clamp(1.375rem,3vw,1.75rem);font-weight:700;margin-bottom:12px}
.story-full-break p{font-size:1.0625rem;color:var(--p-text-light);max-width:560px;margin:0 auto;line-height:1.7}

/* ===== Artist Profile Page ===== */
.artist-profile{padding-bottom:0}
.artist-profile-inner{
    display:flex;gap:48px;align-items:flex-start;
}
.artist-photo{
    position:relative;flex-shrink:0;width:220px;
}
.artist-photo img{
    width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:var(--p-radius-xl);
    border:3px solid var(--p-border-light);
}
.artist-photo-placeholder{
    display:none;align-items:center;justify-content:center;
    width:100%;aspect-ratio:1;
    border-radius:var(--p-radius-xl);
    background:var(--p-bg-soft);border:3px solid var(--p-border-light);
    font-size:3rem;font-weight:700;color:var(--p-text-muted);
}
.artist-photo-placeholder.visible{display:flex}
.artist-social{
    display:flex;gap:8px;justify-content:center;margin-top:12px;
}
.social-link{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--p-border);background:var(--p-bg-card);
    color:var(--p-text-light);transition:all var(--p-transition);
}
.social-link:hover{color:var(--p-primary);border-color:var(--p-primary)}
.social-link svg{width:18px;height:18px}
.artist-info{flex:1;min-width:0}
.artist-tag{
    display:inline-block;padding:4px 14px;border-radius:var(--p-radius-xl);
    background:var(--p-primary-light);color:var(--p-primary);
    font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    margin-bottom:12px;
}
.artist-info h1{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;margin-bottom:6px}
.artist-role{font-size:1.0625rem;color:var(--p-primary);font-weight:500;margin-bottom:16px}
.artist-bio{font-size:.9375rem;color:var(--p-text-light);line-height:1.7;max-width:560px}
.artist-stats{
    display:flex;gap:32px;margin-top:24px;
}
.artist-stats div{text-align:center}
.artist-stats strong{display:block;font-size:1.5rem;font-weight:700;color:var(--p-text)}
.artist-stats span{font-size:.75rem;color:var(--p-text-muted);font-weight:500}

/* Portfolio gallery */
.portfolio-section{margin:56px 0 0}
.portfolio-section h2{font-size:1.375rem;font-weight:700;margin-bottom:24px}
.portfolio-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.portfolio-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.portfolio-item{
    position:relative;border-radius:var(--p-radius-lg);overflow:hidden;
    background:var(--p-bg-soft);aspect-ratio:4/3;cursor:pointer;
}
.portfolio-item img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .4s ease;display:block;
}
.portfolio-item:hover img{transform:scale(1.04)}
.portfolio-item .portfolio-placeholder{
    width:100%;height:100%;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:8px;
    color:var(--p-text-muted);font-size:.8125rem;
}
.portfolio-item .portfolio-placeholder svg{width:32px;height:32px;opacity:.35}
.portfolio-item.wide{grid-column:span 2}

/* Portfolio lightbox */
.portfolio-lightbox{
    position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
    cursor:zoom-out;
}
.portfolio-lightbox.active{opacity:1;visibility:visible}
.portfolio-lightbox img{
    max-width:90vw;max-height:90vh;object-fit:contain;
    border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.portfolio-lightbox-close{
    position:absolute;top:20px;right:24px;
    width:40px;height:40px;border:none;background:rgba(255,255,255,.12);
    border-radius:50%;color:#fff;font-size:1.25rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}
.portfolio-lightbox-close:hover{background:rgba(255,255,255,.25)}
.portfolio-lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;border:none;background:rgba(255,255,255,.12);
    border-radius:50%;color:#fff;font-size:1.25rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}
.portfolio-lightbox-nav:hover{background:rgba(255,255,255,.25)}
.portfolio-lightbox-nav.prev{left:20px}
.portfolio-lightbox-nav.next{right:20px}

@media(max-width:768px){
    .story-hero{padding:88px 0 48px}
    .story-body{padding:40px 20px 56px}
    .story-quote{padding:24px 20px;margin:32px 0}
    .story-numbers{grid-template-columns:repeat(2,1fr);padding:28px 20px;margin:32px 0}
    .story-compare{grid-template-columns:1fr;gap:16px;margin:32px 0}
    .story-cta{padding:36px 24px;margin:40px 0 0}
    .story-timeline{padding-left:28px}
    .story-nav{flex-direction:column}
    .story-nav a{max-width:100%}
    .story-nav a.next{text-align:left}
    .story-full-break{margin:40px -20px;padding:48px 20px}
    .story-highlight{padding:20px 24px;margin:32px 0}
    .story-image{margin:32px 0}
    .artist-profile-inner{flex-direction:column;gap:24px;align-items:center;text-align:center}
    .artist-photo{width:160px}
    .artist-bio{max-width:100%}
    .artist-stats{justify-content:center}
    .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .portfolio-grid.cols-3{grid-template-columns:repeat(2,1fr)}
    .portfolio-item.wide{grid-column:span 2}
    .portfolio-section{margin:40px 0 0}
    .portfolio-lightbox-nav.prev{left:8px}
    .portfolio-lightbox-nav.next{right:8px}
}