/*
Theme Name: DramaEduLab
Author: 비랜딩 (blanding.kr)
Author URI: https://blanding.kr
Description: 생활 장면을 관계 연습으로 잇는 드라마에듀랩 전용 테마. 비랜딩 기본테마 파생.
Version: 1.9.9
Text Domain: dramaedulab
*/
@font-face{font-family:SUIT;src:url('assets/SUIT-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--forest:#263e3a;--sage:#486c63;--eucalyptus:#8eaea1;--paper:#f6f1e7;--ivory:#fffdf8;--terra:#d9a28f;--gold:#c7a55b;--muted:#5e6e66;--line:#d8ded4;--font:SUIT,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--display:600 clamp(40px,4.5vw,64px)/1.18 var(--font);--page-title:600 clamp(36px,4vw,52px)/1.25 var(--font);--section-title:600 clamp(30px,3.3vw,42px)/1.3 var(--font);--subheading:600 clamp(22px,2vw,26px)/1.4 var(--font);--body:400 17px/1.75 var(--font);--body-small:400 15px/1.65 var(--font);--label:600 15px/1.4 var(--font);--caption:500 12px/1.6 var(--font);--display-spacing:-.045em;--title-spacing:-.035em;--body-spacing:-.015em;--label-spacing:-.01em;--caption-spacing:.03em}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--ivory);color:var(--forest);font:var(--body);letter-spacing:var(--body-spacing);word-break:keep-all;overflow-wrap:break-word}button,input,textarea,select{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{background:none}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1{font:var(--display);letter-spacing:var(--display-spacing)}h2{font:var(--section-title);letter-spacing:var(--title-spacing)}h3{font:var(--subheading);letter-spacing:var(--title-spacing)}p{color:var(--muted)}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--sage);outline-offset:5px}.wrap{width:min(1240px,calc(100% - 80px));margin:auto}.skip-link{position:fixed;top:-100px;left:16px;z-index:999;background:white;padding:12px}.skip-link:focus{top:12px}.eyebrow{font:var(--caption);letter-spacing:.12em;color:var(--sage);margin-bottom:22px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sage);margin-right:8px}.site-header{background:var(--ivory);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:94px}.brand{display:flex;gap:9px;align-items:center;color:var(--forest);flex-shrink:0}.brand svg{width:43px;height:43px}.brand>span{font:650 22px/1.2 var(--font);letter-spacing:-.05em}.brand-lab{font-weight:450;margin-left:2px}.brand small{display:block;font:500 9px/1.6 var(--font);letter-spacing:.14em;margin-top:5px}nav{display:flex;gap:32px;align-items:center;font:var(--label);letter-spacing:var(--label-spacing)}nav a:hover{color:var(--sage)}.nav-studio{padding:12px 20px;border:1px solid var(--sage);border-radius:3px}.menu-toggle{display:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border:1px solid var(--line);padding:17px 24px;font:var(--label);letter-spacing:var(--label-spacing);border-radius:3px;transition:background .18s,transform .18s;min-height:52px}.button:hover{background:#e7ede6;transform:translateY(-2px)}.button.primary{background:var(--forest);color:var(--ivory);border-color:var(--forest)}.button.primary:hover{background:var(--sage)}.button.light{background:var(--ivory);border-color:var(--ivory);color:var(--forest)}.text-link{display:inline-block;font:var(--label);letter-spacing:var(--label-spacing);border:0;border-bottom:1px solid var(--eucalyptus);padding:7px 0;background:transparent}.text-link:hover{color:var(--sage);border-color:var(--sage)}.actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}.hero{background:var(--paper);padding:74px 0 0}.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:42px;align-items:center;min-height:520px}.hero-copy{padding:15px 0 38px}.hero h1 em{font-style:normal;color:var(--sage);position:relative}.hero-lead{margin:30px 0 32px;font:var(--body);letter-spacing:var(--body-spacing)}.hero .actions{gap:20px}.hero .text-link{font:var(--body-small);letter-spacing:var(--label-spacing)}.hero-note{font:var(--caption);letter-spacing:var(--caption-spacing);margin-top:22px}.hero-art{position:relative;padding:0 0 98px}.hero-art>img{width:100%;height:370px;object-fit:cover;object-position:50% 50%;border-radius:150px 5px 5px 5px}.hero-paper{position:absolute;bottom:20px;left:-24px;background:var(--ivory);padding:23px 28px;width:300px;box-shadow:0 10px 35px #263e3a0c;border-top:3px solid var(--terra);transform:rotate(-3deg)}.hero-paper .eyebrow{display:block;margin:0 0 10px}.hero-paper p{font:var(--subheading);letter-spacing:var(--title-spacing);color:var(--forest)}.hero-paper strong{font-weight:600}.hero-paper>div{border-top:1px solid var(--line);margin-top:18px;padding-top:12px;font:var(--caption);letter-spacing:var(--caption-spacing)}.art-caption{position:absolute;right:0;bottom:43px;writing-mode:vertical-rl;font:var(--caption);letter-spacing:.12em}.hero-bottom{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-top:1px solid #cdd5c7;font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage)}.section{padding:108px 0}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:50px}.section-heading>p{max-width:400px;margin-bottom:5px;font:var(--body-small);letter-spacing:var(--body-spacing)}.moments{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.moments article{padding:34px 44px 40px 0}.moments article+article{padding-left:50px;border-left:1px solid var(--line)}.moment-number{font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage);display:block;margin-bottom:20px}.moments h3{margin-bottom:16px}.moments p{font:var(--body-small);letter-spacing:var(--body-spacing);margin-bottom:25px}.how-section{background:#ecf0e9}.steps{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}.steps li{border-top:2px solid var(--eucalyptus);padding:24px 22px 0 0}.steps li+li{padding-left:26px;border-left:1px solid #d5ddd1}.steps li:nth-child(2){border-top-color:var(--terra)}.steps li:nth-child(3){border-top-color:var(--gold)}.steps li:nth-child(4){border-top-color:#a5bfc4}.steps li>span{font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage);display:block;margin-bottom:30px}.steps h3{font:var(--label);letter-spacing:var(--label-spacing);margin-bottom:12px}.steps p{font:var(--body-small);letter-spacing:var(--body-spacing)}.section-note{font:var(--caption);letter-spacing:var(--caption-spacing);margin-top:34px}.type-layout{display:grid;grid-template-columns:1fr 2fr;gap:42px}.type-tabs{display:flex;flex-direction:column}.type-tabs button{display:flex;gap:22px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);padding:25px 20px;font:var(--subheading);letter-spacing:var(--title-spacing);flex:1}.type-tabs button>span{font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage)}.type-tabs small{display:block;font:var(--body-small);letter-spacing:var(--body-spacing);margin-top:7px;color:var(--muted)}.type-tabs b{margin-left:auto;font-weight:400}.type-tabs [aria-selected=true]{background:var(--forest);color:var(--ivory);border-color:var(--forest);border-radius:3px}.type-tabs [aria-selected=true] small,.type-tabs [aria-selected=true]>span{color:#cddcd2}.type-panel{background:#e8eee5;padding:44px 48px;position:relative;overflow:hidden;border-radius:3px}.type-panel h3{font:var(--section-title);letter-spacing:var(--title-spacing);margin-bottom:20px;position:relative;z-index:1}.type-panel p{font:var(--body-small);letter-spacing:var(--body-spacing);margin-bottom:28px;position:relative;z-index:1}.type-panel .button{position:relative;z-index:1}.panel-word{font:600 92px/1 var(--font);letter-spacing:-.06em;position:absolute;bottom:-8px;right:14px;color:#263e3a0a;pointer-events:none}.type-panel.education{background:#f1e5da}.type-panel.drama{background:#e7edf0}.sample-section{background:var(--paper)}.sample-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.sample-grid>div>p:not(.eyebrow){margin:25px 0}.sample-grid>div>.sample-note{font:var(--caption);letter-spacing:var(--caption-spacing)}.script-paper{padding:32px 35px;background:var(--ivory);box-shadow:9px 9px 0 #e5dfd0;transform:rotate(1deg);border-top:3px solid var(--terra)}.script-head,.script-foot{display:flex;justify-content:space-between;font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage)}.script-head{padding-bottom:20px;border-bottom:1px solid var(--line)}.stage-direction{font:var(--caption);letter-spacing:var(--caption-spacing);margin:23px 0}.script-dialogue{display:flex;gap:24px;align-items:start;margin:19px 0;font:var(--body-small);letter-spacing:var(--body-spacing)}.script-dialogue b{font:var(--label);letter-spacing:var(--label-spacing);color:var(--sage);padding-top:2px}.script-dialogue:nth-of-type(3) b{color:#976450}.rewrite{border-left:3px solid var(--sage);background:#edf1e9;padding:18px 22px;margin:27px 0}.rewrite>span{font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--sage)}.rewrite p{color:var(--forest);font:var(--body-small);letter-spacing:var(--body-spacing);margin-top:8px}.script-foot{padding-top:4px}.grow-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.grow-links a{padding:27px 24px 25px 0;position:relative}.grow-links a+a{border-left:1px solid var(--line);padding-left:28px}.grow-links a>span{font:var(--caption);letter-spacing:.12em;color:var(--sage)}.grow-links h3{margin:20px 0 8px}.grow-links p{font:var(--body-small);letter-spacing:var(--body-spacing)}.grow-links b{position:absolute;right:24px;top:24px;font:var(--subheading);letter-spacing:var(--title-spacing)}.grow-links a:hover{background:#f3f4ec}.closing{background:var(--sage);padding:80px 0 88px;color:var(--ivory);overflow:hidden}.closing .wrap{position:relative}.closing .eyebrow{color:#d4e1d7}.closing h2{font:var(--page-title);letter-spacing:var(--title-spacing);margin-bottom:30px;position:relative;z-index:1}.closing-mark{position:absolute;right:40px;top:-80px;font:400 450px/1 Georgia,serif;color:#8eaea140;pointer-events:none}.site-footer{padding:55px 0 24px}.footer-top{display:flex;gap:60px;justify-content:space-between;align-items:center;margin-bottom:45px}.footer-top p{font:var(--body-small);letter-spacing:var(--body-spacing);margin-right:auto}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--muted)}.page-main{padding-top:75px;padding-bottom:100px;min-height:70vh}.page-title{font:var(--page-title);letter-spacing:var(--title-spacing);margin-bottom:22px}.page-lead{margin-bottom:40px}.empty-state{text-align:center;background:var(--paper);padding:50px 24px 65px;margin:45px 0 0;border-radius:4px}.empty-symbol{display:block;width:75px;margin:0 auto 22px}.empty-state h2{font:var(--subheading);letter-spacing:var(--title-spacing)}.empty-state p{margin:18px 0 28px}.empty-state .text-link{display:block;width:fit-content;margin:20px auto 0}.studio-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px}.draft-form{padding-top:25px;border-top:1px solid var(--line)}.draft-form label{display:block;font:var(--label);letter-spacing:var(--label-spacing);margin-bottom:12px}.draft-form select,.draft-form textarea{width:100%;border:1px solid #bac7bb;padding:15px;background:white;margin-bottom:24px;border-radius:3px}.draft-form textarea{resize:vertical}.draft-form .small{font:var(--caption);letter-spacing:var(--caption-spacing);margin-bottom:22px}.draft-form #draft-status{font:var(--body-small);letter-spacing:var(--body-spacing);margin-top:20px}.studio-note{padding:36px;background:var(--paper)}.studio-note h2{font:var(--subheading);letter-spacing:var(--title-spacing)}.studio-note p:not(.eyebrow){font:var(--body-small);letter-spacing:var(--body-spacing);margin:22px 0}.entry-content{max-width:780px}.entry-content p,.entry-content ul,.entry-content ol{margin:24px 0;font:var(--body);letter-spacing:var(--body-spacing)}.entry-content h2{margin:40px 0 20px}.entry-content h3{margin:30px 0 16px}.post-row{padding:25px 0;border-bottom:1px solid var(--line)}dialog{border:1px solid var(--line);background:var(--ivory);padding:0;color:var(--forest);border-radius:6px;width:min(680px,calc(100% - 32px));max-height:90dvh}dialog::backdrop{background:#14292399;backdrop-filter:blur(4px)}.reader{padding:30px 36px}.reader-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}.reader-top .eyebrow{margin:0}.close-dialog{border:0;font:var(--subheading);letter-spacing:var(--title-spacing);width:44px;height:44px;flex-shrink:0}.reader h2{font:var(--subheading);letter-spacing:var(--title-spacing)}.reader-description{font:var(--body-small);letter-spacing:var(--body-spacing);margin:12px 0 25px}.reader-scene{background:#ecf1e8;min-height:190px;padding:26px;border-left:3px solid var(--sage)}.reader-role{font:var(--label);letter-spacing:var(--label-spacing);display:block;margin-bottom:18px;color:var(--sage)}.reader-scene p{font:var(--subheading);letter-spacing:var(--title-spacing);color:var(--forest)}.reader-scene[data-tone=child]{background:#f5e9df;border-color:var(--terra)}.reader-controls{display:flex;align-items:center;justify-content:space-between;margin:24px 0;gap:15px}.reader-controls>span{font:var(--caption);letter-spacing:var(--caption-spacing)}.reader-bottom{display:flex;justify-content:space-between;gap:15px;align-items:center}.reader-bottom>span{font:var(--caption);letter-spacing:var(--caption-spacing);color:var(--muted)}body.modal-open{overflow:hidden}.admin-bar .site-header{top:32px}
@media(min-width:1100px){.hero h1{white-space:nowrap}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}nav{gap:18px}.brand>span{font-size:20px}.hero-grid{gap:25px}.hero h1{font:var(--page-title);letter-spacing:var(--title-spacing)}.hero-art>img{height:330px}.hero .actions{align-items:start;flex-direction:column;gap:12px}.hero-note{max-width:330px}.sample-grid{gap:55px}.type-layout{gap:24px}.type-panel{padding:35px}.footer-top{gap:30px}.footer-bottom{flex-wrap:wrap}.section-heading>p{max-width:320px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header-inner{min-height:78px}.brand svg{width:36px;height:36px}.menu-toggle{display:flex;flex-direction:column;gap:6px;padding:12px;border:0}.menu-toggle span{display:block;width:22px;height:1px;background:var(--forest)}#main-nav{display:none;position:absolute;top:100%;left:0;width:100%;padding:20px;background:var(--ivory);border-bottom:1px solid var(--line);align-items:stretch;gap:0;flex-direction:column}#main-nav.is-open{display:flex}#main-nav a{padding:15px 10px}.nav-studio{margin-top:10px}.hero{padding-top:40px}.hero-grid{grid-template-columns:1fr;gap:12px}.hero-copy{padding-bottom:22px}.hero h1{font:var(--display);letter-spacing:var(--display-spacing)}.hero-lead{margin:23px 0}.hero .actions{gap:16px}.hero-art{max-width:600px;width:100%;margin:auto;padding-bottom:82px}.hero-art>img{height:auto;aspect-ratio:1.45;border-top-left-radius:110px}.hero-paper{left:10px;bottom:17px;width:265px;padding:20px 24px}.art-caption{bottom:29px;right:4px}.hero-bottom{margin-top:12px;gap:20px}.hero-bottom span{max-width:185px}.hero-bottom a{flex-shrink:0}.section{padding:66px 0}.section-heading{display:block;margin-bottom:32px}.section-heading>p{max-width:none;margin-top:24px}.moments article{padding:28px 20px 30px 0}.moments article+article{padding-left:24px}.moments p br{display:none}.steps{grid-template-columns:1fr 1fr;gap:32px 0}.steps li:nth-child(3){border-left:0;padding-left:0}.steps h3{min-height:22px}.type-layout{grid-template-columns:1fr;gap:22px}.type-tabs{flex-direction:row}.type-tabs button{padding:14px 10px;justify-content:center;font:var(--label);letter-spacing:var(--label-spacing);gap:10px}.type-tabs button small,.type-tabs button b{display:none}.type-panel{min-height:340px;padding:30px}.type-panel p{max-width:330px}.sample-grid{grid-template-columns:1fr;gap:28px}.script-paper{margin:0 5px 8px 0}.grow-links{grid-template-columns:1fr}.grow-links a,.grow-links a+a{padding:25px 20px 26px 0;border-left:0;border-bottom:1px solid var(--line)}.grow-links h3{margin-top:12px}.closing{padding:60px 0}.closing-mark{right:-40px;top:10px;font-size:300px}.footer-top{flex-wrap:wrap;gap:24px}.footer-top p{width:100%;margin:0}.footer-top .text-link{margin-top:0}.footer-bottom{display:block}.footer-bottom>span,.footer-bottom>a{display:block;margin-bottom:12px}.page-main{padding-top:48px;padding-bottom:65px}.studio-grid{grid-template-columns:1fr;gap:30px}.empty-state{padding:36px 20px}.empty-state p{font:var(--body-small);letter-spacing:var(--body-spacing)}.reader{padding:18px 22px 24px}.reader-top{margin-bottom:15px}.reader-bottom{align-items:start;flex-direction:column}.reader-scene{padding:20px;min-height:210px}.reader-controls .button{padding:13px 15px}.admin-bar .site-header{top:46px}}
@media(max-width:450px){.moments{grid-template-columns:1fr}.moments article,.moments article+article{padding:28px 0;border-left:0}.moments article+article{border-top:1px solid var(--line)}.steps li{padding-right:15px}.steps li+li{padding-left:18px}.steps li:nth-child(3){padding-left:0}.type-tabs button{gap:6px}.script-paper{padding:25px 23px}.section-heading h2 br{display:none}.hero-note{max-width:280px}.type-panel h3{font:var(--subheading);letter-spacing:var(--title-spacing)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.brand img{width:43px;height:43px;object-fit:contain;mix-blend-mode:multiply}.empty-symbol img{width:75px;height:75px;mix-blend-mode:multiply}
@media(min-width:801px) and (max-width:1100px){.hero h1{font:var(--display);letter-spacing:var(--display-spacing)}}
@media(max-width:800px){.brand img{width:36px;height:36px}}

.art-caption{writing-mode:horizontal-tb;bottom:0;right:0}
@media(max-width:800px){.art-caption{display:none}}

#sample-dialog .reader-scene{position:relative;overflow:hidden}#sample-dialog .reader-scene::after{content:"SAMPLE";position:absolute;right:18px;bottom:8px;font:var(--caption);letter-spacing:.15em;color:var(--sage);opacity:.45;pointer-events:none}.footer-links{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0;font:var(--caption);letter-spacing:var(--caption-spacing)}

.del-home-banner{background:var(--sage);color:var(--ivory);padding:14px 0;text-align:center;font:var(--body-small);letter-spacing:var(--body-spacing)}

/* Brand accents: coral actions, golden highlights, distinct script families. */
:root{--coral:#b84432;--coral-hover:#963525;--sun:#f2c857;--apricot:#fbe2d5;--sky:#deedf8;--lavender:#eae3f8;--blue:#285e82;--plum:#674586}
.button.primary{background:var(--coral);border-color:var(--coral);color:var(--ivory)}
.button.primary:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.nav-studio{background:var(--sun);border-color:var(--sun)}
.nav-studio:hover{background:#edbc39;color:var(--forest)}
.hero{background:#f7eee2}
.hero .dot{background:var(--coral)}
.hero h1 em{color:var(--coral);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:.1em;text-underline-offset:.13em;text-decoration-skip-ink:none}
.hero-paper{background:#fff0b8;border-top-color:var(--coral)}
.hero-paper>div{border-color:#dac579}
.moment-number{color:var(--coral)}
.moments article+article .moment-number{color:var(--blue)}
.how-section{background:#eaf2f7}
.steps li{border-top-width:4px;border-top-color:var(--sage)}
.steps li:nth-child(2){border-top-color:var(--coral)}
.steps li:nth-child(3){border-top-color:#b18115}
.steps li:nth-child(4){border-top-color:var(--plum)}
.steps li>span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:36px;padding:5px 10px;background:#d5e6dc;color:var(--forest)}
.steps li:nth-child(2)>span{background:var(--apricot);color:var(--coral-hover)}
.steps li:nth-child(3)>span{background:#ffe8a0;color:#6a4a0a}
.steps li:nth-child(4)>span{background:var(--lavender);color:var(--plum)}
.type-panel.life{background:var(--apricot)}
.type-panel.education{background:var(--sky)}
.type-panel.drama{background:var(--lavender)}
.type-tabs #tab-life[aria-selected=true]{background:var(--coral);border-color:var(--coral)}
.type-tabs #tab-education[aria-selected=true]{background:var(--blue);border-color:var(--blue)}
.type-tabs #tab-drama[aria-selected=true]{background:var(--plum);border-color:var(--plum)}
.type-tabs [aria-selected=true] small,.type-tabs [aria-selected=true]>span{color:var(--ivory)}
.sample-section{background:#fbf2d9}
.script-paper{border-top-color:var(--coral);box-shadow:9px 9px 0 #e8ce8e}
.rewrite{background:var(--sky);border-left-color:var(--blue)}
.rewrite>span{color:var(--blue)}
.grow-links a{border-top:4px solid var(--coral)}
.grow-links a:nth-child(2){border-top-color:#b18115}
.grow-links a:nth-child(3){border-top-color:var(--plum)}
.grow-links a>b{color:var(--coral)}
.grow-links a:nth-child(2)>b{color:#88600c}
.grow-links a:nth-child(3)>b{color:var(--plum)}
.grow-links a:hover{background:var(--apricot)}
.grow-links a:nth-child(2):hover{background:#fff0bd}
.grow-links a:nth-child(3):hover{background:var(--lavender)}
.closing{background:#315b52}
.closing .button.light{background:var(--sun);border-color:var(--sun)}
.closing .button.light:hover{background:#ffe08a}
body .del-kinds button:nth-child(1){border-bottom:3px solid var(--coral)}
body .del-kinds button:nth-child(2){border-bottom:3px solid var(--blue)}
body .del-kinds button:nth-child(3){border-bottom:3px solid var(--plum)}
body .del-kinds button:nth-child(1).active{background:var(--coral);border-color:var(--coral)}
body .del-kinds button:nth-child(2).active{background:var(--blue);border-color:var(--blue)}
body .del-kinds button:nth-child(3).active{background:var(--plum);border-color:var(--plum)}
body .del-side{background:var(--sky)}
body .del-balance{color:var(--coral)}

/* Feature introduction: broad palette surfaces and motion tied to visibility. */
.feature-section{background:#f4f5ec}
.feature-heading{text-align:center;max-width:900px;margin:0 auto 60px}
.feature-heading h2{font:var(--page-title);letter-spacing:var(--title-spacing)}
.feature-heading h2 em{font-style:normal;color:var(--plum)}
.feature-heading>p:not(.eyebrow){margin:26px 0 30px}
.feature-heading .button{border-radius:50px;padding-left:30px;padding-right:30px}
.feature-cards{gap:20px}
.steps.feature-cards li,.steps.feature-cards li+li{padding:0;border:0;background:var(--ivory);border-radius:18px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.feature-visual{height:230px;background:#c5dcbb;position:relative;padding:45px 20px 35px;display:flex;align-items:center;justify-content:center;color:var(--forest)}
.feature-cards li:nth-child(2) .feature-visual{background:#bcd8eb}
.feature-cards li:nth-child(3) .feature-visual{background:#cfc3e9}
.feature-cards li:nth-child(4) .feature-visual{background:#edc4b4}
.feature-index{position:absolute;top:16px;left:20px;font:var(--caption)}
.feature-tag{position:absolute;bottom:18px;left:20px;font:var(--caption)}
.feature-detail{padding:26px 22px 30px}
.feature-detail h3{font:var(--subheading);margin-bottom:12px}
.feature-detail p{font:var(--body-small)}
.feature-sheet{background:var(--ivory);width:145px;padding:19px;transform:rotate(-7deg);border-radius:5px;box-shadow:5px 6px 0 #263e3a1a;transition:transform .35s}
.feature-sheet i{display:block;height:3px;background:#a0bbaa;margin-bottom:10px}.feature-sheet i:nth-child(2){width:75%}.feature-sheet b{font:var(--label)}
.feature-edit{width:100%;font:var(--caption)}.feature-edit span{display:block;text-decoration:line-through;margin:0 0 14px;color:#475c69}.feature-edit b{display:block;background:var(--ivory);padding:14px 10px;border-left:3px solid var(--blue);font:var(--label)}
.feature-chat{width:100%;display:grid;gap:12px;font:var(--label)}.feature-chat b{background:var(--ivory);padding:12px;border-radius:14px 14px 14px 0;justify-self:start;font-weight:600}.feature-chat b+b{background:var(--plum);color:var(--ivory);justify-self:end;border-radius:14px 14px 0 14px}
.feature-library{display:flex;gap:7px;align-items:end}.feature-library b{font:var(--label);background:#fff4d2;padding:22px 10px;border-radius:4px;transform:rotate(-7deg)}.feature-library b:nth-child(2){background:var(--ivory);transform:translateY(-12px)}.feature-library b:nth-child(3){background:#dfe9d9;transform:rotate(7deg)}
.grow-links{gap:20px;border:0}.grow-links a,.grow-links a+a{padding:30px 24px;border:0;border-radius:12px;background:var(--apricot)}.grow-links a:nth-child(2){background:#fae6a8}.grow-links a:nth-child(3){background:var(--lavender)}
.motion-enter{animation:feature-reveal .65s both;animation-delay:var(--reveal-delay,0ms)}
@keyframes feature-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.steps.feature-cards li:hover{transform:translateY(-7px);box-shadow:0 12px 25px #263e3a12}.feature-cards li:hover .feature-sheet{transform:rotate(0deg)}.feature-cards li:hover .feature-chat b:last-child{transform:translateX(-6px)}.feature-chat b{transition:transform .25s}.grow-links a{transition:transform .25s}.grow-links a:hover{transform:translateY(-5px)}}
@media(max-width:1100px){.feature-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-visual{height:220px}.feature-edit,.feature-chat{max-width:250px}}
@media(max-width:600px){.feature-heading{margin-bottom:36px}.feature-heading h2{font:var(--section-title)}.feature-heading>p br{display:none}.feature-cards{grid-template-columns:1fr;gap:22px}.feature-visual{height:205px}.feature-detail{padding:24px}.feature-detail p br{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-enter{animation:none}.feature-cards *, .grow-links a,.button{transition:none!important}.button:hover{transform:none}}

/* Edge-to-edge community introduction and site-wide FAQ launcher. */
.group-intro{background:var(--lavender);padding:90px 0 64px}
.group-intro h1{font:var(--page-title);letter-spacing:var(--title-spacing);max-width:850px}
.group-intro h1 em{font-style:normal;color:var(--plum)}
.group-intro p:not(.eyebrow){margin:28px 0 32px;max-width:650px}
.group-intro-notes{display:flex;gap:36px;border-top:1px solid #c9bbdc;margin-top:60px;padding-top:26px;font:var(--label);flex-wrap:wrap}
.group-intro-notes span:before{content:'↗';margin-right:12px;color:var(--plum)}
.grow-section{background:#e2ecdf}
.help-launcher{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60}
.help-launcher summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:14px 19px;background:var(--plum);color:var(--ivory);border-radius:40px;cursor:pointer;list-style:none;box-shadow:0 4px 16px #263e3a26;font:var(--label)}
.help-launcher summary::-webkit-details-marker{display:none}
.help-popover{position:absolute;right:0;bottom:74px;width:min(320px,calc(100vw - 40px));background:var(--ivory);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 32px #263e3a24;max-height:calc(100dvh - 150px);overflow:auto}
.help-popover>p{font:var(--label);color:var(--forest);margin-bottom:12px}
.help-popover a{display:block;padding:15px 0;border-top:1px solid var(--line)}
.help-popover strong{display:block;font:var(--label)}.help-popover a>span{display:block;font:var(--body-small);color:var(--muted);margin-top:6px}.help-popover a:hover strong{color:var(--plum)}
.faq-search{margin:26px 0}.faq-search label{display:block;font:var(--label);margin-bottom:10px}.faq-search input{width:100%;padding:16px 20px;border:1px solid #a8b6ac;border-radius:32px;background:white;font:var(--body)}.faq-search p{font:var(--body-small);margin-top:10px}
body .del-help details{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px 0}body .del-help summary{cursor:pointer;font:var(--label);padding:6px 0}body .del-help details[open]{background:#f4f0fa;padding:22px 18px}body .del-help details p{margin-top:16px}
.site-footer{padding-bottom:100px}
@media(max-width:600px){.group-intro{padding:58px 0 40px}.group-intro h1{font:var(--section-title)}.group-intro-notes{gap:18px;margin-top:38px;flex-direction:column}.help-launcher{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}.help-launcher summary{padding:14px;min-width:56px}.help-launcher summary>span{display:none}}
@media print{.help-launcher{display:none!important}}

/* A shared pastel-gray foundation, with one signature color per destination. */
:root{--ivory:#fafbfb;--paper:#e9ecee;--line:#d6dcdf;--page-tint:#e6e9ec;--page-accent:#48616b}
body{background:#f0f1f2}
.site-header,.site-footer{background:#f0f1f2}
.hero{background:#e9ecee}
.hero-paper{background:#f6edc6}
.feature-section{background:#f0f1f2}
.sample-section{background:#e7eaec}
.grow-section{background:#e5e9e8}
.nav-studio{background:#e0e5e6;border-color:#c6d0d1}
.nav-studio:hover{background:#d3dedc}
.del-palette-sky{--page-tint:#deebf3;--page-accent:#285e82}
.del-palette-sage{--page-tint:#dfeade;--page-accent:#3c6651}
.del-palette-beige{--page-tint:#eee2cf;--page-accent:#785330;--paper:#f0e7da}
.del-palette-lavender{--page-tint:#e7e1f1;--page-accent:#674586}
.del-palette-rose{--page-tint:#f0dfdd;--page-accent:#984c4a}
.page-heading{background:var(--page-tint);box-shadow:0 0 0 100vmax var(--page-tint);clip-path:inset(0 -100vmax);padding:46px 0 36px;margin-top:-75px;margin-bottom:36px}
.page-heading .page-title{color:var(--page-accent);margin-bottom:0}
.page-heading .eyebrow{color:var(--page-accent);margin-bottom:16px}
body[class*="del-palette-"] .button.primary{background:var(--page-accent);border-color:var(--page-accent)}
body[class*="del-palette-"] .button.primary:hover{filter:brightness(.9)}
body[class*="del-palette-"] .del-side,body[class*="del-palette-"] .del-empty,body[class*="del-palette-"] .empty-state,body[class*="del-palette-"] .del-credit-policy{background:var(--page-tint)}
body[class*="del-palette-"] .del-balance{color:var(--page-accent)}
body[class*="del-palette-"] .help-launcher summary{background:var(--page-accent)}
.del-palette-beige{background:#f5eee3}
.group-intro{background:var(--page-tint)}
.del-page-groups .page-heading{background:transparent;box-shadow:none;padding-top:36px}
.del-page-create #main-nav a,
.del-page-archive #main-nav a,
.del-page-shop #main-nav a,
.del-page-community #main-nav a,
.del-page-studio #main-nav a {
  text-decoration: none !important;
}
@media(max-width:800px){.page-heading{margin-top:-48px;padding:32px 0 28px;margin-bottom:28px}}

/* ==========================================================================
   Main 1: Header, Navigation Dots, Dropdowns & Metallic Workspace Button
   ========================================================================== */
:root {
  --del-ink: #073f45;
  --del-coral: #ff5547;
  --del-mint: #48cdb9;
  --del-blue: #4898ef;
  --del-yellow: #f1dc00;
  --del-purple: #8858c8;
  --del-lemon: #f8df47;
}

.site-header.main1-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #dbe6e5;
  transition: background .2s ease, box-shadow .2s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}

.main1-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main1-nav > ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.main1-nav li {
  position: relative;
}

.main1-nav li > a,
.main1-nav .nav-head > a {
  display: inline-flex;
  align-items: center;
  color: var(--del-ink);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none !important;
  transition: color .15s ease;
  line-height: 1.2;
}

.main1-nav li > a:hover,
.main1-nav .nav-head > a:hover {
  color: var(--del-coral);
}

.main1-nav li.dot-lavender > a:hover,
.main1-nav li.dot-lavender .nav-head > a:hover {
  color: var(--del-purple);
}

.main1-nav .nav-head {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.main1-nav .nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 12px;
  height: 12px;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px;
  max-height: 12px;
  cursor: pointer;
  color: #708a87;
  margin-left: 2px;
  transform: translateY(4px);
  line-height: 1;
  transition: color .2s ease;
  vertical-align: middle;
}

.main1-nav .nav-sub-toggle .sub-arrow-icon {
  width: 9px;
  height: 5px;
  display: block;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 50%;
}

.main1-nav .has-sub:hover .nav-sub-toggle,
.main1-nav .has-sub.is-open .nav-sub-toggle {
  color: var(--del-coral);
}

.main1-nav li.dot-lavender:hover .nav-sub-toggle,
.main1-nav li.dot-lavender.is-open .nav-sub-toggle {
  color: var(--del-purple);
}

.main1-nav .has-sub:hover .nav-sub-toggle .sub-arrow-icon,
.main1-nav .has-sub.is-open .nav-sub-toggle .sub-arrow-icon {
  transform: rotate(180deg);
}

/* Nav Label and text-centered dot indicator */
.main1-nav .nav-label {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 24px 0 16px;
  line-height: 1.2;
}

.main1-nav .nav-dot-target {
  display: inline-block;
  position: relative;
}

/* Strictly centered under the exact Korean center characters, completely ignoring arrow */
.main1-nav .nav-dot-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), opacity .18s ease;
  opacity: 0.88;
}

/* Ensure no dots anywhere else */
.main1-nav li::after,
.main1-nav a::after,
.main1-nav .nav-label::after,
.main1-nav .sub-menu li::after,
.main1-nav .sub-menu a::after {
  display: none !important;
}

.main1-nav .nav-dot-target::after {
  display: block !important;
}

.main1-nav li.dot-coral .nav-dot-target::after { background: var(--del-coral); }
.main1-nav li.dot-mint .nav-dot-target::after { background: var(--del-mint); }
.main1-nav li.dot-blue .nav-dot-target::after { background: var(--del-blue); }
.main1-nav li.dot-yellow .nav-dot-target::after { background: var(--del-yellow); }
.main1-nav li.dot-lavender .nav-dot-target::after { background: var(--del-purple); }

.main1-nav > ul > li:hover .nav-dot-target::after,
.main1-nav > ul > li.is-open .nav-dot-target::after {
  transform: translateX(-50%) scale(1.35);
  opacity: 1;
}

/* Subpage active state highlight */
.del-page-create #main-nav li.dot-coral .nav-dot-target::after,
.del-page-archive #main-nav li.dot-mint .nav-dot-target::after,
.del-page-shop #main-nav li.dot-blue .nav-dot-target::after,
.del-page-community #main-nav li.dot-lavender .nav-dot-target::after {
  transform: translateX(-50%) scale(1.35);
  opacity: 1;
}

/* Submenu dropdown */
.main1-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 165px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dfe8e7;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(10, 55, 60, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100;
}

.main1-nav .has-sub:hover > .sub-menu,
.main1-nav .has-sub:focus-within > .sub-menu,
.main1-nav .has-sub.is-open > .sub-menu {
  display: block;
  animation: delFadeSlide .2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes delFadeSlide {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.main1-nav .sub-menu li {
  margin: 0;
  padding: 0;
}

.main1-nav .sub-menu li::after {
  display: none !important;
}

.main1-nav .sub-menu a {
  display: block;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--del-ink);
  text-decoration: none;
  border-left: 3px solid var(--sub-color, var(--del-coral));
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}

.main1-nav .sub-menu a:hover {
  background: #f0f7f6;
  color: var(--del-coral);
}

/* Metallic Badge Workspace Button */
.main1-workspace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 1px solid var(--del-lemon);
  border-radius: 24px;
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  background: linear-gradient(145deg, #cc5a3a 0%, #8d170f 60%, #60100c 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 8px rgba(45,0,0,.4), 0 4px 12px rgba(85,20,10,.35), 0 0 0 2px rgba(248,223,71,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.main1-workspace:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.65), inset 0 -4px 8px rgba(45,0,0,.4), 0 6px 16px rgba(85,20,10,.42), 0 0 0 2px rgba(248,223,71,.5);
}

/* Mobile responsive for header & nav */
@media (max-width: 900px) {
  .main1-nav > ul {
    gap: 18px;
  }
}

@media (max-width: 800px) {
  .site-header.main1-header {
    background: rgba(255, 255, 255, 0.98);
  }
  .header-inner {
    min-height: 72px;
  }
  #main-nav.main1-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px 24px 28px;
    background: #ffffff;
    border-bottom: 2px solid #dbe6e5;
    box-shadow: 0 16px 36px rgba(0,0,0,.1);
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  #main-nav.main1-nav.is-open {
    display: flex;
  }
  .main1-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .main1-nav li > a,
  .main1-nav .nav-head > a {
    padding: 0;
    font-size: 16px;
    width: auto;
  }
  .main1-nav .nav-label {
    padding: 10px 4px;
    display: inline-block;
  }
  .main1-nav .nav-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .main1-nav .nav-sub-toggle {
    width: 28px;
    height: 28px;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px;
    max-height: 28px;
    padding: 0 !important;
  }
  .main1-nav .nav-dot-target::after {
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
  }
  .main1-nav li::after,
  .main1-nav a::after,
  .main1-nav .nav-label::after {
    display: none !important;
  }
  .main1-nav .sub-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: #f4f8f7;
    border-radius: 8px;
    padding: 6px;
    margin: 4px 0 8px 12px;
    width: auto;
  }
  .main1-nav .sub-menu a {
    padding: 8px 12px;
    font-size: 14px;
  }
  .main1-workspace {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    margin-top: 8px;
  }
}

/* --- Visual Scene Stage (장면 무대) --- */
dialog#sample-dialog {
  width: min(720px, calc(100% - 32px));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(216, 222, 212, 0.8);
}
.reader.reader-stage {
  padding: 24px 28px 28px;
}
.reader-stage-visual {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #2b3a36;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.12);
}
.reader-stage-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  filter: brightness(0.96) saturate(1.05);
  transition: background-image 0.5s ease;
}
.reader-stage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.reader-stage-actors {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 36px 4px;
  pointer-events: none;
  z-index: 2;
}
.stage-actor {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, filter 0.3s ease;
  transform-origin: bottom center;
}
.stage-actor.is-speaking {
  opacity: 1;
  transform: scale(1.12) translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4)) drop-shadow(0 0 10px rgba(255,255,255,0.7));
  z-index: 5;
}
.stage-actor.is-dimmed {
  opacity: 0.55;
  transform: scale(0.92);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) grayscale(0.2);
}
.stage-actor.is-neutral {
  opacity: 0.85;
  transform: scale(0.98);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.actor-img {
  height: 200px;
  width: auto;
  object-fit: contain;
  display: block;
}
.actor-tag {
  position: absolute;
  bottom: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: #1a2e29;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.8);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.stage-actor.is-speaking .actor-tag {
  background: #2563eb;
  color: #ffffff;
  border-color: #60a5fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37,99,235,0.4);
}
.reader-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.reader-info-bar h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1a2e29;
  margin: 0;
}
.reader-info-bar p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.reader-scene {
  background: #f8faf9;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--sage);
  border-radius: 12px;
  padding: 18px 22px;
  min-height: 100px;
  position: relative;
  transition: all 0.3s ease;
}
.reader-scene[data-tone=child] {
  background: #fdfaf6;
  border-left-color: var(--terra);
}
.reader-scene[data-tone=guide] {
  background: #f0fdf4;
  border-left-color: #16a34a;
}
.reader-role {
  font-size: 13px;
  font-weight: 700;
  color: var(--sage);
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.reader-scene[data-tone=child] .reader-role {
  color: var(--terra);
}
.reader-scene[data-tone=guide] .reader-role {
  color: #15803d;
}
.reader-scene p {
  font-size: 16px;
  line-height: 1.6;
  color: #1e293b;
  font-weight: 500;
  margin: 0;
}
@media (max-width: 640px) {
  .reader.reader-stage {
    padding: 16px 18px 20px;
  }
  .reader-stage-visual {
    height: 190px;
  }
  .actor-img {
    height: 155px;
  }
  .reader-info-bar {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   WooCommerce / Account & Auth (로그인 · 회원가입 UI 리디자인)
   ========================================================================== */
.del-page-my-account .entry-content {
  max-width: 1020px;
  margin: 0 auto;
}

.woocommerce-account .woocommerce {
  margin-top: 10px;
}

/* 2열 로그인 / 회원가입 카드 컨테이너 */
#customer_login.col2-set::before,
#customer_login.col2-set::after {
  content: none !important;
  display: none !important;
}

#customer_login.col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 36px !important;
  align-items: start !important;
  margin: 30px 0 60px !important;
}

#customer_login .col-1 {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#customer_login .col-2 {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#customer_login .col-1,
#customer_login .col-2 {
  float: none !important;
  width: 100% !important;

  margin: 0;
  padding: 38px 36px 42px;
  background: #ffffff;
  border: 1px solid #e2ece6;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(24, 60, 48, 0.05);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#customer_login .col-1:hover,
#customer_login .col-2:hover {
  box-shadow: 0 16px 44px rgba(24, 60, 48, 0.08);
}

/* 카드 상단 헤더 */
#customer_login h2 {
  font-size: 24px;
  font-weight: 750;
  color: #173f66;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#customer_login .col-1 h2::before {
  content: "🔑";
  font-size: 20px;
}

#customer_login .col-2 h2::before {
  content: "✨";
  font-size: 20px;
}

/* 서브 설명 문구 */
#customer_login .col-1::after {
  content: "기존 계정으로 로그인하여 작업실과 대본을 불러옵니다.";
  display: block;
  order: -1;
  font-size: 14px;
  color: #637a74;
  margin-bottom: 24px;
}

#customer_login .col-2::after {
  content: "간편하게 가입하고 AI 대본 무료 생성권을 받아보세요.";
  display: block;
  order: -1;
  font-size: 14px;
  color: #637a74;
  margin-bottom: 24px;
}

/* 회원가입 혜택 안내 배너 */
.del-auth-benefit-badge {
  background: linear-gradient(135deg, #f0f7f2, #e8f3ec);
  border: 1px solid #cce2d4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: #1d5236;
  line-height: 1.5;
}

/* 폼 행 & 레이블 */
.woocommerce form .form-row {
  padding: 0;
  margin: 0 0 20px;
}

.woocommerce form .form-row label {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: #263e3a;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.woocommerce form .form-row label .required {
  color: #e54b3c;
  font-weight: 700;
  text-decoration: none;
}

/* 입력 필드 */
.woocommerce-Input.input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"] {
  width: 100% !important;
  box-sizing: border-box;
  padding: 13px 16px !important;
  font-size: 15px !important;
  border: 1.5px solid #d4ded8 !important;
  border-radius: 10px !important;
  background: #fbfdfc !important;
  color: #173f66 !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  font-family: inherit;
}

.woocommerce-Input.input-text:focus,
.woocommerce form input:focus {
  background: #ffffff !important;
  border-color: #2b7a4f !important;
  box-shadow: 0 0 0 3px rgba(43, 122, 79, 0.12) !important;
}

/* 비밀번호 표시 버튼 */
.woocommerce form .password-input {
  position: relative;
  display: block;
  width: 100%;
}

.woocommerce form .show-password-input {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s;
  padding: 0;
}

.woocommerce form .show-password-input:hover {
  opacity: 0.95;
}

/* 체크박스 레이블 */
.woocommerce-form-login__rememberme,
.woocommerce-form-register .form-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #4a635d;
  cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"],
.woocommerce-form-register input[type="checkbox"] {
  width: 17px !important;
  height: 17px !important;
  accent-color: #2b7a4f;
  margin: 0;
  cursor: pointer;
}

/* 비밀번호 찾기 링크 */
.woocommerce-LostPassword {
  margin: 16px 0 0 !important;
  text-align: right;
  font-size: 13.5px;
}

.woocommerce-LostPassword a {
  color: #637a74;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.18s;
}

.woocommerce-LostPassword a:hover {
  color: #173f66;
}

/* 개인정보 보호 안내 박스 */
.woocommerce-privacy-policy-text {
  background: #f5f8f6;
  border: 1px solid #e1ebe5;
  border-radius: 10px;
  padding: 13px 16px;
  margin: 16px 0 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #556e68;
}

.woocommerce-privacy-policy-text p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.woocommerce-privacy-policy-text a {
  color: #226f7c;
  font-weight: 600;
  text-decoration: underline;
}

/* 로그인 & 회원가입 제출 버튼 */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-button.button {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  letter-spacing: -0.01em;
  border: 1px solid transparent !important;
  margin-top: 8px;
}

/* 로그인 버튼: 딥 네이비 */
.woocommerce-form-login__submit {
  background: linear-gradient(135deg, #1f4e5b, #173f66) !important;
  color: #ffffff !important;
  border-color: #143754 !important;
  box-shadow: 0 6px 18px rgba(23, 63, 102, 0.22) !important;
}

.woocommerce-form-login__submit:hover {
  background: linear-gradient(135deg, #276272, #1b4975) !important;
  box-shadow: 0 10px 24px rgba(23, 63, 102, 0.32) !important;
  transform: translateY(-2px);
}

/* 회원가입 버튼: 포레스트 에메랄드 */
.woocommerce-form-register__submit {
  background: linear-gradient(135deg, #2b7a4f, #185233) !important;
  color: #ffffff !important;
  border-color: #174e30 !important;
  box-shadow: 0 6px 18px rgba(24, 82, 51, 0.22) !important;
}

.woocommerce-form-register__submit:hover {
  background: linear-gradient(135deg, #328c5a, #1f633f) !important;
  box-shadow: 0 10px 24px rgba(24, 82, 51, 0.32) !important;
  transform: translateY(-2px);
}

/* 우커머스 메시지 및 알림 박스 */
.woocommerce-notices-wrapper {
  margin-bottom: 24px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: 12px !important;
  padding: 16px 22px 16px 52px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  border: 1px solid transparent !important;
  border-left-width: 4px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04) !important;
  margin-bottom: 20px !important;
  position: relative;
  list-style: none !important;
}

.woocommerce-message {
  background: #f0f7f3 !important;
  border-color: #c9e3d2 !important;
  border-left-color: #2b7a4f !important;
  color: #1c4b32 !important;
}

.woocommerce-info {
  background: #f2f7fa !important;
  border-color: #d1e2eb !important;
  border-left-color: #173f66 !important;
  color: #173f66 !important;
}

.woocommerce-error {
  background: #fff5f5 !important;
  border-color: #fed7d7 !important;
  border-left-color: #e53e3e !important;
  color: #9b2c2c !important;
}

.woocommerce-error li {
  margin: 4px 0 !important;
}

/* 반응형 (800px 이하) */
@media (max-width: 800px) {
  #customer_login.col2-set {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #customer_login .col-1,
  #customer_login .col-2 {
    padding: 28px 22px 32px;
  }
  #customer_login h2 {
    font-size: 21px;
  }
}

/* ==========================================================================
   로그인 필요 안내 모달 (Del Login Prompt Modal)
   ========================================================================== */
.del-login-modal-wrap {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.del-login-modal-wrap.is-open {
  display: flex;
}

.del-login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 38, 34, 0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.del-login-modal-box {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 32px 32px;
  box-shadow: 0 24px 60px rgba(10, 40, 32, 0.28);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  animation: delModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes delModalPop {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.del-login-modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #8fa39e;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}

.del-login-modal-close:hover {
  background: #f0f4f2;
  color: #263e3a;
}

.del-login-modal-icon {
  font-size: 38px;
  margin-bottom: 12px;
}

.del-login-modal-box h3 {
  font-size: 22px;
  font-weight: 750;
  color: #173f66;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.del-login-modal-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #556e67;
  margin: 0 0 26px;
  word-break: keep-all;
}

.del-login-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.del-login-modal-btn {
  background: linear-gradient(135deg, #2b7a4f, #185233) !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(24, 82, 51, 0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.del-login-modal-btn:hover {
  background: linear-gradient(135deg, #328c5a, #1f633f) !important;
  transform: translateY(-2px);
}

.del-login-modal-cancel {
  font-size: 13.5px;
  color: #7b948e;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.del-login-modal-cancel:hover {
  color: #263e3a;
}

/* ==========================================================================
   Studio Gate (Guest / Logged-Out Screen)
   ========================================================================== */
.del-studio-gate {
  padding: 60px 20px 80px;
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.del-gate-card {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #ebe5da;
  border-radius: 24px;
  padding: 52px 44px;
  box-shadow: 0 16px 45px rgba(23, 63, 102, 0.07);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.del-gate-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #173f66, #2b7a4f, #d4a359);
}
.del-gate-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: #2b7a4f;
  background: #eef7f2;
  border: 1px solid #d4ece0;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.del-gate-card h2 {
  font-size: 26px;
  font-weight: 800;
  color: #173f66;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.del-gate-lead {
  font-size: 15px;
  color: #5d6765;
  line-height: 1.65;
  margin: 0 auto 34px;
  word-break: keep-all;
}
.del-gate-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  margin-bottom: 36px;
}
.del-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #fbfaf8;
  border: 1px solid #f0ece5;
  border-radius: 16px;
  transition: all 0.2s ease;
}
.del-benefit-item:hover {
  background: #ffffff;
  border-color: #d6e2dc;
  box-shadow: 0 4px 12px rgba(23, 63, 102, 0.04);
}
.del-benefit-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.del-benefit-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #1a2e2b;
  margin-bottom: 3px;
}
.del-benefit-item p {
  font-size: 13px;
  color: #6b7c77;
  line-height: 1.45;
  margin: 0;
  word-break: keep-all;
}
.del-gate-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.del-gate-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  padding: 16px 28px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #173f66 0%, #2b7a4f 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(23, 63, 102, 0.22) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  cursor: pointer;
}
.del-gate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(23, 63, 102, 0.3) !important;
  filter: brightness(1.05);
}
.del-gate-actions .text-link {
  font-size: 14px;
  color: #6b7c77;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  transition: color 0.2s;
}
.del-gate-actions .text-link:hover {
  color: #173f66;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .del-studio-gate {
    padding: 30px 16px 60px;
  }
  .del-gate-card {
    padding: 36px 20px;
    border-radius: 20px;
  }
  .del-gate-card h2 {
    font-size: 21px;
  }
  .del-gate-lead {
    font-size: 13.5px;
    margin-bottom: 24px;
  }
  .del-benefit-item {
    padding: 12px 14px;
  }
  .del-benefit-icon {
    font-size: 20px;
  }
  .del-benefit-item strong {
    font-size: 13.5px;
  }
  .del-benefit-item p {
    font-size: 12px;
  }
  .del-gate-btn {
    font-size: 14.5px !important;
    padding: 14px 20px !important;
    max-width: 100%;
  }
}