/* studio/home.css — /studio 메인의 새 디자인 (2026-10-16)
 *
 * 출처: Figma Make 프로젝트 ezer-studio-source 의 styles.css.
 * 옮기는 방법은 _design-ref/make-home-css.ps1 참고 — 선언은 그대로 두고
 * 클래스 이름에 e- 접두사만 붙여 studio.css·brand.css 와 충돌하지 않게 격리했다.
 *
 * 이 파일만으로 페이지가 성립한다. studio.css 는 공용 버튼(.s-btn*)과
 * 모바일 시트에만 쓰인다.
 */
/* ── 디자인 토큰 ───────────────────────────────────────────────────────
   팔레트는 기존 스튜디오(studio.css --s-*)와 **같은 값**이다. 바뀐 것은
   쓰임새뿐이다 — 초록을 캔버스가 아니라 강조와 마무리 띠에만 쓴다. */
:root{
  --e-ink:#16191b;
  --e-paper:#faf9f6;
  --e-tint:#f1f6f2;
  --e-white:#fff;
  --e-green:#256b38;
  --e-muted:#72766f;
  --e-line:rgba(22,25,27,.15);
  --e-text-body:17px;
  --e-text-detail:14px;
  --e-motion-ease:cubic-bezier(.16,1,.3,1);
}
/* ── 페이지 바탕 ───────────────────────────────────────────────────────
   brand.css 의 h1,h2,h3 규칙이 NMF Classic + !important 로 잡혀 있어
   본문 서체를 되돌린다. 새 디자인은 산세리프 한 벌로 승부한다. */

.e-page{background:var(--e-paper);color:var(--e-ink);font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip;}
.e-page h1,.e-page h2,.e-page h3,.e-page h4{font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif !important;font-weight:500 !important;letter-spacing:-.05em;}
.e-page h1{letter-spacing:-.075em;}
.e-page *{box-sizing:border-box;}
.e-page img{max-width:100%;height:auto;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;min-width:320px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--e-green);outline-offset:6px}
img{display:block;width:100%}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{word-break:keep-all}
p{word-break:keep-all}
em{font-style:normal;color:var(--e-green)}
.e-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:absolute;top:0;left:0;right:0;z-index:20;border-bottom:1px solid var(--e-line);background:var(--e-paper)}
.e-brand{display:flex;align-items:center;gap:10px}
.e-brand__mark{font-family:'DM Sans',sans-serif;font-size:45px;font-weight:700;line-height:1;letter-spacing:-.09em;color:var(--e-green);margin-right:6px}
.e-brand>span:last-child{display:flex;flex-direction:column}
.e-brand strong{font-family:'DM Sans',sans-serif;font-size:17.5px;letter-spacing:.16em;line-height:1}
.e-brand small{font-family:'DM Sans',sans-serif;font-size:15px;letter-spacing:.4em;margin-top:7px}
.e-nav{display:flex;gap:32px}
.e-nav a{font-size:15px;color:var(--e-muted);transition:color .2s}
.e-nav a:hover{color:var(--e-green)}
.e-header__cta{font-size:15px;display:flex;align-items:center;gap:18px}
.e-header__cta svg{width:17px}
.e-menu-button{display:none}
.e-hero{padding:120px 7% 30px;min-height: min(960px,100svh);position:relative;display:flex;flex-direction:column}
.e-hero__topline{display:flex;justify-content:space-between;font-size:13px;color:var(--e-muted);letter-spacing:.06em}
.e-hero__topline span:last-child{font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.15em}
.e-hero__content{margin:auto 0;padding:70px 0 60px}
.e-eyebrow{font-size:15px;font-weight:500;letter-spacing:.07em;margin-bottom:32px;display:flex;align-items:center;gap:10px}
.e-eyebrow>span{width:6px;height:6px;background:var(--e-green);border-radius:50%}
h1{font-size:clamp(48px,6.25vw,94px);letter-spacing:-.075em;font-weight:500;line-height:1.3;margin-bottom:40px}
h1 em{font-weight:700}
.e-hero__bottom{display:flex;align-items:end;justify-content:space-between;gap:32px}
.e-hero__bottom p{font-size:16.5px;line-height:1.95;color:var(--e-muted);margin:0}
.e-button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;background:var(--e-green);color:var(--e-white);padding:22px 26px;font-size:15px;transition:background .2s,transform .2s}
.e-button:hover{background:var(--e-ink);transform:translateY(-3px)}
.e-scroll-cue{display:flex;align-items:center;gap:22px;width:fit-content;font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.18em}
.e-scroll-cue>span:last-child{font-size:26px;letter-spacing:0}
.e-hero__index{position:absolute;right:7%;bottom:36px;color:var(--e-muted);font-size:13px;font-family:'DM Sans',sans-serif}
.e-section{padding:110px 7%}
.e-section-label{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--e-line);padding-top:18px;margin-bottom:90px;font-size:13px;color:var(--e-muted)}
.e-section-label>span:first-child{font-family:'DM Sans',sans-serif;letter-spacing:.13em}
.e-section h2{font-size:clamp(34px,4.2vw,62px);font-weight:500;letter-spacing:-.065em;line-height:1.4;margin-bottom:24px}
.e-empathy{background:var(--e-tint)}
.e-empathy__layout{display:grid;grid-template-columns:1fr 1fr;gap:12%}
.e-empathy__layout>div:first-child{align-self:start;position:sticky;top:100px}
.e-empathy .e-eyebrow{color:var(--e-muted)}
.e-thoughts>p{font-size:clamp(25px,2.6vw,38px);line-height:1.65;letter-spacing:-.05em;padding:38px 0 60px;border-bottom:1px solid var(--e-line);margin:0;position:relative}
.e-thoughts>p:first-child{padding-top:0}
.e-thoughts>p>span{display:block;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--e-green);letter-spacing:.05em;margin-bottom:14px}
.e-thoughts__ending{padding-top:38px;line-height:2;font-size:16.5px;color:var(--e-muted)}
.e-thoughts__ending strong{color:var(--e-green);font-weight:500}
.e-turning{text-align:center;padding-top:160px;padding-bottom:100px;background:var(--e-green);color:var(--e-white)}
.e-turning .e-eyebrow{justify-content:center;opacity:.65;font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.18em}
.e-turning h2{font-size:clamp(38px,5.2vw,78px);line-height:1.45}
.e-turning h2 span{opacity:.55}
.e-turning>p:last-of-type{font-size:16.5px;line-height:2;opacity:.7;margin-top:32px}
.e-turning__line{display:block;width:1px;height:85px;background:currentColor;opacity:.3;margin:60px auto 0}
.e-story{padding-bottom:0}
.e-story__layout{display:grid;grid-template-columns:1.15fr 1fr;gap:10%;position:relative}
.e-story__visual{position:sticky;top:130px;align-self:start}
.e-browser-bar{height:32px;background:var(--e-tint);border:1px solid var(--e-line);border-bottom:0;display:flex;align-items:center;gap:5px;padding:0 12px}
.e-browser-bar>span{width:5px;height:5px;border-radius:50%;background:var(--e-muted);opacity:.3}
.e-browser-bar small{font-size:15px;font-family:'DM Sans',sans-serif;letter-spacing:.12em;color:var(--e-muted);margin:auto}
.e-story__screens{aspect-ratio:1.24;position:relative;background:var(--e-tint);overflow:hidden;border:1px solid var(--e-line)}
.e-story__screens img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .65s ease,transform 1s;transform:scale(1.025)}
.e-story__screens img.is-active{opacity:1;transform:scale(1)}
.e-story__caption{display:flex;justify-content:space-between;font-size:13px;padding-top:18px;color:var(--e-green)}
.e-visual-note{font-size:13px;color:var(--e-muted);margin-top:12px}
.e-chapter{min-height:75vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0;opacity:.35;transition:opacity .5s}
.e-chapter.is-active{opacity:1}
.e-chapter .e-eyebrow{color:var(--e-green);font-size:15px;margin-bottom:25px}
.e-chapter h2{font-size:clamp(30px,3vw,45px)}
.e-chapter>p:last-of-type{font-size:16.5px;color:var(--e-muted);line-height:2.1;max-width:390px}
.e-chapter__mobile-image{display:none}
.e-section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:55px}
.e-section-heading h2{margin:0}
.e-section-heading>p{color:var(--e-muted);font-size:15px;line-height:2;margin:0}
.e-work{background:var(--e-tint)}
.e-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.e-project__image{position:relative;overflow:hidden}
.e-project__image img{aspect-ratio:1.2;object-fit:cover;object-position:top;transition:transform .5s}
.e-project:hover img{transform:scale(1.04)}
.e-project__arrow{position:absolute;bottom:0;right:0;padding:15px;background:var(--e-paper);color:var(--e-green)}
.e-project__type{font-size:13px!important;letter-spacing:.06em;color:var(--e-green)!important;margin:22px 0 12px}
.e-project h3{font-size:19px;letter-spacing:-.04em;font-weight:500;margin-bottom:13px}
.e-project>p{font-size:15px;color:var(--e-muted);line-height:1.9}
.e-work__note{font-size:13px;color:var(--e-muted);margin:35px 0 0;border-top:1px solid var(--e-line);padding-top:20px}
.e-process__steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:70px 0}
.e-process__steps li{border-top:1px solid var(--e-line);padding-top:25px}
.e-process__steps li>span{font-family:'DM Sans',sans-serif;color:var(--e-green);font-size:15px}
.e-process__steps h3{font-weight:500;font-size:23px;letter-spacing:-.04em;margin:35px 0 15px}
.e-process__steps p{font-size:15px;line-height:2;color:var(--e-muted);max-width:300px}
.e-cost-note{padding:45px;background:var(--e-tint);display:grid;grid-template-columns:1fr 1fr;gap:15%}
.e-cost-note .e-eyebrow{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--e-green)}
.e-cost-note h3{font-size:27px;font-weight:500;letter-spacing:-.04em;line-height:1.6;margin:0}
.e-cost-note>div>p:not(.e-eyebrow),.e-cost-note li{font-size:15px;color:var(--e-muted);line-height:2}
.e-cost-note ul{padding-left:16px;margin:20px 0 30px}
.e-text-link{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--e-line);padding-bottom:12px;font-size:15px;color:var(--e-green)}
.e-faq{display:grid;grid-template-columns:1fr 1.3fr;gap:10%;padding-top:40px}
.e-faq .e-eyebrow{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--e-muted)}
.e-faq h2{font-size:35px}
.e-faq-item{border-top:1px solid var(--e-line)}
.e-faq-item:last-child{border-bottom:1px solid var(--e-line)}
.e-faq-item button{display:grid;grid-template-columns:30px 1fr 22px;align-items:center;width:100%;text-align:left;padding:26px 0;border:0;background:transparent;cursor:pointer;gap:10px}
.e-faq-item button>span:first-child{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--e-green)}
.e-faq-item strong{font-size:15px;font-weight:500}
.e-faq-symbol{font-size:23px;font-weight:400}
.e-faq-item div>p{font-size:15px;color:var(--e-muted);line-height:2;margin:0;padding:0 35px 28px}
.e-contact{background:var(--e-green);color:var(--e-white);position:relative;overflow:hidden;padding-bottom:160px}
.e-contact .e-section-label{color:var(--e-white);opacity:.6;border-color:currentColor}
.e-contact>.e-eyebrow{opacity:.6}
.e-contact h2{font-size:clamp(36px,5vw,74px)}
.e-contact h2>span{opacity:.55}
.e-contact__bottom{display:flex;justify-content:space-between;align-items:end;gap:35px;position:relative;z-index:1;margin-top:45px}
.e-contact__bottom p{font-size:16.5px;line-height:2;opacity:.8;margin:0}
.e-contact .e-button{background:var(--e-paper);color:var(--e-green)}
.e-contact .e-button:hover{background:var(--e-white)}
.e-contact__word{font-family:'DM Sans',sans-serif;font-size:clamp(90px,16vw,250px);letter-spacing:-.07em;position:absolute;bottom:-.35em;right:6%;line-height:1.3;opacity:.07;pointer-events:none}
footer{display:flex;gap:30px;align-items:center;padding:38px 7%}
footer p{font-size:15px;color:var(--e-muted);margin:0 auto 0 20px}
footer>span{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--e-muted)}
.e-back-top{border:1px solid var(--e-line);padding:10px 16px}



/* ── 좁은 화면 ──────────────────────────────────────────────────────── */
@media(max-width:1000px){.e-nav{gap:18px}
.e-header__cta{display:none}
.e-hero{min-height:850px}
h1{font-size:70px}
.e-story__layout{gap:6%}
.e-section-label{margin-bottom:65px}
.e-project-grid{gap:18px}
.e-project h3{font-size:17.5px}
.e-section-heading{align-items:start}
.e-section-heading>p br{display:none}
.e-section-heading>p{max-width:260px}
.e-faq{gap:6%}
.e-cost-note{gap:8%;padding:30px}
.e-contact__bottom{align-items:start;flex-direction:column}
}

@media(max-width:700px){html{scroll-padding-top:30px}
.e-header{height:76px;padding:0 6%}
.e-brand__mark{font-size:38px}
.e-brand strong{font-size:16.5px}
.e-brand small{font-size:15px}
.e-menu-button{display:flex;flex-direction:column;gap:7px;padding:12px;background:none;border:0}
.e-menu-button span{display:block;width:24px;height:1px;background:var(--e-ink)}
.e-nav{display:none;position:absolute;top:76px;left:0;right:0;padding:20px 6%;background:var(--e-paper);border-bottom:1px solid var(--e-line)}
.e-nav--open{display:flex;flex-direction:column;gap:0}
.e-nav a{padding:16px 0}
.e-hero{padding:104px 6% 25px;min-height:calc(100svh - 10px)}
.e-hero__topline{font-size:13px}
.e-hero__topline span:last-child{display:none}
.e-hero__content{padding:65px 0 50px}
.e-hero .e-eyebrow{font-size:13px;letter-spacing:0;margin-bottom:25px}
h1{font-size:clamp(36px,8.5vw,58px);line-height:1.5;margin-bottom:28px;letter-spacing:-.075em}
.e-hero__bottom{flex-direction:column;align-items:start;gap:28px}
.e-hero__bottom p{font-size:15px;line-height:2}
.e-button{font-size:15px;padding:19px 20px;gap:25px}
.e-scroll-cue{font-size:15px}
.e-hero__index{bottom:34px}
.e-section{padding:75px 6%}
.e-section-label{font-size:15px;gap:15px;margin-bottom:50px}
.e-section-label>span:last-child{font-size:13px;letter-spacing:-.04em}
.e-section h2{font-size:34px}
.e-eyebrow{font-size:13px;margin-bottom:22px}
.e-empathy__layout{grid-template-columns:1fr;gap:40px}
.e-empathy__layout>div:first-child{position:static}
.e-empathy__layout h2 br:nth-child(2){display:none}
.e-thoughts>p{font-size:25px;padding:28px 0 35px}
.e-thoughts__ending{font-size:15px}
.e-turning{padding-top:100px;padding-bottom:60px}
.e-turning h2{font-size:37px}
.e-turning .e-eyebrow{font-size:15px}
.e-turning>p:last-of-type{font-size:15px}
.e-turning__line{height:60px;margin-top:35px}
.e-story__layout{display:block}
.e-story__visual{display:none}
.e-chapter{min-height:0;padding:10px 0 65px;opacity:1}
.e-chapter h2{font-size:31px}
.e-chapter>p:last-of-type{font-size:15px;margin-bottom:25px}
.e-chapter__mobile-image{display:block;aspect-ratio:1.3;object-fit:cover;object-position:top;border:1px solid var(--e-line)}
.e-story{padding-bottom:0}
.e-section-heading{flex-direction:column;gap:22px;margin-bottom:35px}
.e-section-heading>p{max-width:none;font-size:15px}
.e-project-grid{grid-template-columns:1fr;gap:35px}
.e-project__image img{aspect-ratio:1.35}
.e-project h3{font-size:21px}
.e-project__type{margin-top:18px}
.e-project>p{max-width:350px}
.e-work__note{line-height:1.8}
.e-process__steps{grid-template-columns:1fr;gap:20px;margin:40px 0}
.e-process__steps h3{font-size:22px;margin:18px 0 10px}
.e-process__steps p{max-width:none}
.e-cost-note{grid-template-columns:1fr;gap:28px;padding:28px 24px}
.e-cost-note h3{font-size:25px}
.e-cost-note .e-eyebrow{margin-bottom:17px}
.e-faq{grid-template-columns:1fr;gap:28px;padding-top:20px}
.e-faq h2{font-size:31px}
.e-faq-item strong{font-size:15px}
.e-faq-item button{grid-template-columns:23px 1fr 18px;gap:5px}
.e-faq-item div>p{padding-left:28px;padding-right:10px}
.e-contact .e-section-label{margin-bottom:60px}
.e-contact h2{font-size:clamp(28px,7.2vw,40px)}
.e-contact__bottom{margin-top:30px;gap:28px}
.e-contact__bottom p{font-size:15px}
.e-contact{padding-bottom:100px}
.e-contact .e-button{width:100%}
footer{flex-wrap:wrap;padding:30px 6%;gap:24px}
footer .e-brand{margin-right:auto}
footer p{order:3;flex-basis:100%;margin:0}
footer>span{order:4}
.e-back-top{margin-left:15px}
 }



/* ── 테마·요금·문의 규칙 ─────────────────────────────────────────────── */
.e-themes { background: var(--e-tint); }
.e-theme-showcase { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9%; margin-top: 80px; }
.e-theme-showcase__stage { position: sticky; top: 80px; align-self: start; }
.e-theme-showcase__label, .e-theme-showcase__footer { display: flex; justify-content: space-between; gap: 20px; font-family: 'DM Sans', 'Noto Sans KR', sans-serif; font-size: 15px; }
.e-theme-showcase__label { color: var(--e-green); letter-spacing: .08em; padding-bottom: 18px; }
.e-theme-showcase__screens { position: relative; aspect-ratio: 1.25; border: 1px solid var(--e-line); overflow: hidden; background: var(--e-paper); box-shadow: 0 25px 65px rgba(22,25,27,.07); }
.e-theme-showcase__screens img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .75s ease, transform 1.2s var(--e-motion-ease); }
.e-theme-showcase__screens img.is-active { opacity: 1; transform: scale(1); }
.e-theme-showcase__footer { padding-top: 20px; color: var(--e-muted); align-items: center; }
.e-theme-showcase__footer a { color: var(--e-green); font-weight: 600; }
.e-theme-scene { min-height: 65vh; display: flex; flex-direction: column; justify-content: center; padding: 55px 0; }
.e-theme-scene .e-eyebrow { color: var(--e-green); }
.e-theme-scene h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.5; letter-spacing: -.05em; font-weight: 500; margin-bottom: 22px; }
.e-theme-scene > p:not(.e-eyebrow) { font-size: 17.5px; color: var(--e-muted); line-height: 1.95; }
.e-theme-audience { color: var(--e-green); font-size: 16.5px; padding-left: 16px; border-left: 2px solid var(--e-green); line-height: 1.8; }
.e-theme-scene__mobile { display: none; }
.e-theme-library { margin-top: 95px; border-top: 1px solid var(--e-line); padding-top: 65px; }
.e-theme-library__heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.e-theme-library__heading .e-eyebrow { color: var(--e-green); margin-bottom: 14px; }
.e-theme-library__heading h3 { font-size: clamp(26px, 2.6vw, 37px); letter-spacing: -.05em; font-weight: 500; margin: 0; line-height: 1.5; }
.e-theme-library__heading > span { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--e-muted); flex-shrink: 0; }
.e-theme-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.e-theme-filters button { border: 1px solid var(--e-line); padding: 12px 19px; font-size: 16.5px; background: transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.e-theme-filters button:hover { border-color: var(--e-green); }
.e-theme-filters button[aria-pressed=true] { background: var(--e-green); border-color: var(--e-green); color: var(--e-white); }
.e-theme-count { font-size: 15px; color: var(--e-muted); margin: 25px 0 22px; }
.e-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 25px; }
.e-theme-card { min-width: 0; }
.e-theme-card__image { aspect-ratio: 1.35; position: relative; overflow: hidden; border: 1px solid var(--e-line); background: var(--e-paper); }
.e-theme-card__image img { height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--e-motion-ease); }
.e-theme-card__image > span { position: absolute; right: 0; bottom: 0; background: var(--e-paper); color: var(--e-green); font-size: 15px; padding: 12px 15px; }
.e-theme-card:hover img { transform: scale(1.04); }
.e-theme-card__meta { padding-top: 20px; }
.e-theme-card__meta > span:first-child { color: var(--e-green); font-size: 15px; }
.e-theme-card h4 { font-size: 22px; line-height: 1.5; letter-spacing: -.04em; font-weight: 600; margin: 11px 0; }
.e-theme-card p { color: var(--e-muted); font-size: 17.5px; line-height: 1.85; margin-bottom: 16px; }
.e-theme-card__audience { display: block; color: var(--e-muted); font-size: 15px; line-height: 1.8; }
.e-theme-expand { display: flex; justify-content: center; align-items: center; gap: 40px; padding: 20px 30px; width: 100%; border: 1px solid var(--e-line); background: transparent; font-size: 17.5px; cursor: pointer; margin-top: 45px; transition: border-color .25s, color .25s; }
.e-theme-expand:hover { border-color: var(--e-green); color: var(--e-green); }
.e-theme-expand > span { font-size: 23px; }
.e-theme-help { display: flex; justify-content: space-between; align-items: center; gap: 35px; border-top: 1px solid var(--e-line); padding-top: 45px; margin-top: 55px; }
.e-theme-help h3 { font-size: 24px; line-height: 1.6; letter-spacing: -.04em; font-weight: 500; margin-bottom: 12px; }
.e-theme-help p { color: var(--e-muted); font-size: 17.5px; line-height: 1.9; margin: 0; }
.e-theme-help .e-button { flex-shrink: 0; }
@media (max-width: 1000px) {
  .e-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-theme-help { flex-direction: column; align-items: start; }
  .e-theme-showcase { gap: 6%; }
}
@media (max-width: 700px) {
  .e-theme-showcase { display: block; margin-top: 35px; }
  .e-theme-showcase__stage { display: none; }
  .e-theme-scene { min-height: 0; padding: 25px 0 40px; }
  .e-theme-scene h3 { font-size: 31px; }
  .e-theme-scene > p:not(.e-eyebrow) { font-size: 17.5px; }
  .e-theme-scene__mobile { display: block; margin-top: 25px; }
  .e-theme-scene__mobile img { aspect-ratio: 1.3; object-fit: cover; object-position: top; border: 1px solid var(--e-line); }
  .e-theme-scene__mobile > span { display: block; text-align: right; font-size: 16.5px; color: var(--e-green); padding-top: 13px; }
  .e-theme-library { margin-top: 25px; padding-top: 45px; }
  .e-theme-library__heading { flex-direction: column; align-items: start; }
  .e-theme-filters { gap: 8px; }
  .e-theme-filters button { padding: 11px 13px; font-size: 15px; }
  .e-theme-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .e-theme-card__image { aspect-ratio: 1.4; }
  .e-theme-help h3 { font-size: 23px; }
  .e-theme-help .e-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .e-theme-card:hover img { transform: none; }
  .e-theme-showcase__screens img { transform: none; }
}

.e-theme-picks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 45px; }
.e-theme-picks button { background: transparent; border: 1px solid var(--e-line); padding: 12px 18px; font-size: 16.5px; cursor: pointer; }
.e-theme-picks button[aria-pressed=true] { background: var(--e-green); border-color: var(--e-green); color: var(--e-white); }
.e-theme-showcase--compact { margin-top: 28px; align-items: center; }
.e-theme-showcase--compact .e-theme-showcase__stage { position: static; }
.e-theme-showcase--compact .e-theme-scene { min-height: 0; padding-block: 25px; }
.e-theme-showcase--compact + .e-theme-library { margin-top: 65px; }
.e-theme-selection-note { font-size: 17.5px; color: var(--e-muted); line-height: 1.9; margin: 35px 0 0; }
@media (max-width: 700px) {
  .e-theme-picks { margin-top: 30px; gap: 8px; }
  .e-theme-picks button { font-size: 16.5px; padding: 11px 13px; }
  .e-theme-showcase--compact + .e-theme-library { margin-top: 30px; }
}

/* Keep supporting information readable without competing with the headlines. */
:root {
  --muted: #555e56;
  --text-body: 17px;
  --text-detail: 14px;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}
.e-nav a, .e-header__cta { font-size: 16.5px; }
.e-header__cta { font-weight: 600; }
.e-hero__topline, .e-hero__topline span:last-child,
.e-eyebrow, .e-hero .e-eyebrow, .e-chapter .e-eyebrow, .e-section-label,
.e-section-label > span:last-child, .e-turning .e-eyebrow,
.e-cost-note .e-eyebrow, .e-faq .e-eyebrow { font-size: 15px; line-height: 1.7; }
.e-hero__bottom p, .e-thoughts__ending, .e-chapter > p:last-of-type,
.e-section-heading > p, .e-project > p, .e-process__steps p,
.e-cost-note > div > p:not(.e-eyebrow), .e-cost-note li,
.e-faq-item div > p, .e-contact__bottom p, .e-turning > p:last-of-type {
  font-size: var(--e-text-body);
  line-height: 1.95;
}
.e-chapter > p:last-of-type { max-width: 460px; }
.e-section-heading > p { max-width: 370px; }
.e-process__steps p { max-width: 360px; }
.e-project__type { font-size: 15px !important; }
.e-project h3 { font-size: 23px; font-weight: 600; line-height: 1.6; }
.e-work__note, .e-visual-note, .e-story__caption, .e-browser-bar small,
.e-scroll-cue, .e-hero__index, .e-thoughts > p > span,
.e-process__steps li > span, .e-faq-item button > span:first-child,
footer p, footer > span { font-size: var(--e-text-detail); line-height: 1.8; }
.e-story__caption { gap: 18px; }
.e-story__caption > span:last-child { flex-shrink: 0; }
.e-browser-bar { height: 42px; }
.e-browser-bar small { font-size: 15px; }
.e-faq-item strong { font-size: 17.5px; font-weight: 600; line-height: 1.8; }
.e-faq-item button { padding-block: 28px; }
.e-button { font-size: 17.5px; font-weight: 600; line-height: 1.7; gap: 24px; max-width: 100%; }
.e-button svg, .e-text-link svg { flex-shrink: 0; }
.e-hero__bottom > p { flex: 1 1 45%; }
.e-hero__bottom .e-button { flex: 0 1 48%; }
.e-hero__bottom { align-items: center; }
.e-text-link { font-size: 16.5px; line-height: 1.8; gap: 18px; }
.e-hero__bottom strong, .e-thoughts__ending strong { color: var(--e-green); font-weight: 700; }
.e-cost-note strong { color: var(--e-green); font-weight: 700; }
.e-cost-note > div > p strong { display: inline-block; font-size: 25px; letter-spacing: -.04em; }
.e-turning .e-eyebrow, .e-turning > p:last-of-type,
.e-contact .e-section-label, .e-contact > .e-eyebrow, .e-contact__bottom p { opacity: .9; }
.e-turning h2 span, .e-contact h2 > span { opacity: 1; font-weight: 700; }
.e-chapter { opacity: 1; }
.e-chapter h2 { transition: color .5s ease; }
.e-chapter.is-active h2 { color: var(--e-green); }
.e-chapter-progress { display: flex; gap: 7px; margin-top: 18px; }
.e-chapter-progress > span { flex: 1; height: 3px; background: var(--e-line); position: relative; overflow: hidden; }
.e-chapter-progress > span::after { content: ''; position: absolute; inset: 0; background: var(--e-green); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--e-motion-ease); }
.e-chapter-progress > .is-complete::after { transform: scaleX(1); }
.e-button { position: relative; overflow: hidden; transition: background .3s, transform .35s var(--e-motion-ease), box-shadow .35s; }
.e-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.e-button:hover::after { transform: translateX(120%); }
.e-button svg, .e-header__cta svg, .e-project__arrow svg, .e-text-link svg { transition: transform .35s var(--e-motion-ease); }
.e-button:hover svg, .e-header__cta:hover svg, .e-project:hover .e-project__arrow svg { transform: translate(3px,-3px); }
.e-text-link:hover svg { transform: translateX(5px); }
.e-project__image img { transition: transform .9s var(--e-motion-ease); }
.e-project__image { transition: box-shadow .45s; }
.e-project:hover .e-project__image { box-shadow: 0 18px 40px rgba(22,25,27,.1); }
.e-faq-item button { transition: color .25s; }
.e-faq-item button:hover, .e-faq-item button[aria-expanded=true] { color: var(--e-green); }
.e-faq-item div:not([hidden]) { animation: answer-enter .35s var(--e-motion-ease); }
.e-hero__content > .e-eyebrow { animation: intro-enter .8s var(--e-motion-ease) both; }
.e-hero h1 { animation: intro-enter 1s .12s var(--e-motion-ease) both; }
.e-hero__bottom { animation: intro-enter 1s .25s var(--e-motion-ease) both; }
.e-turning__line { transform-origin: top; }
@keyframes intro-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes answer-enter { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@supports (animation-timeline: scroll()) {
  .e-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; background: var(--e-green); transform-origin: left; animation: reading-progress linear both; animation-timeline: scroll(); }
  @keyframes reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@supports (animation-timeline: view()) {
  .e-turning__line { animation: line-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes line-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .e-header { padding-inline: 4%; }
  .e-nav { gap: 18px; }
  .e-nav a { font-size: 16.5px; }
  .e-hero__bottom { flex-direction: column; align-items: flex-start; }
  .e-hero__bottom .e-button { flex-basis: auto; }
  .e-project h3 { font-size: 21px; }
  .e-project-grid { gap: 22px; }
}
@media (max-width: 700px) {
  :root { --text-body: 16px; --text-detail: 13px; }
  .e-hero__topline, .e-hero__topline span:last-child, .e-eyebrow,
  .e-hero .e-eyebrow, .e-chapter .e-eyebrow, .e-section-label,
  .e-section-label > span:last-child, .e-turning .e-eyebrow,
  .e-cost-note .e-eyebrow, .e-faq .e-eyebrow { font-size: 15px; letter-spacing: .02em; }
  .e-section-label { flex-wrap: wrap; row-gap: 8px; }
  .e-hero__bottom { align-items: stretch; }
  .e-hero__bottom .e-button { flex-basis: auto; }
  .e-button { font-size: 16.5px; padding: 19px 20px; gap: 16px; }
  .e-contact__bottom { align-items: stretch; }
  .e-hero__content { padding-top: 45px; }
  .e-hero .e-eyebrow { word-break: keep-all; }
  .e-section-heading > p, .e-chapter > p:last-of-type { max-width: none; }
  .e-project h3 { font-size: 22px; }
  .e-faq-item strong { font-size: 17.5px; }
  .e-faq-item button { grid-template-columns: 24px 1fr 20px; gap: 7px; }
  .e-cost-note > div > p strong { font-size: 24px; }
  .e-cost-note { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .e-reading-progress { display: none; }
  .e-hero__content > .e-eyebrow, .e-hero h1, .e-hero__bottom,
  .e-faq-item div:not([hidden]), .e-turning__line { animation: none; }
  .e-button:hover, .e-button:hover svg, .e-header__cta:hover svg,
  .e-project:hover img, .e-project:hover .e-project__arrow svg,
  .e-text-link:hover svg { transform: none; }
  .e-button::after { display: none; }
}

.e-figma-custom-code-fragment { display: contents; }
.e-figma-bypass-link { position: fixed; top: 8px; left: 8px; z-index: 2147483647; transform: translateY(-150%); border-radius: 6px; background: #111827; color: #fff; padding: 8px 12px; font: 600 16.5px/1.2 system-ui, sans-serif; text-decoration: none; }
.e-figma-bypass-link:focus { transform: translateY(0); }

/* studio/home-extra.css — 새 디자인을 옮기면서 **더한** 부분만 모은 파일 (2026-10-16)
 *
 * home.css 는 Figma 원본(styles.css)을 기계적으로 옮긴 것이라 손대지 않는다
 * (_design-ref/make-home-css.ps1 로 언제든 다시 만들 수 있다). 여기에는
 * 원본에 없던 두 덩어리만 둔다.
 *
 *   1) 요금 안내 표 — 원본은 가격을 한 줄 문장으로만 썼다. 세 요금제의 차이를
 *      비교하려면 표가 맞아서 표로 바꿨다.
 *   2) 문의 팝업 — 원본은 CTA 단추가 /studio/apply 로만 나갔다. 여기서는
 *      기존 POST /api/studio-request 로 보내는 입력 양식을 팝업으로 띄운다.
 *
 * 클래스는 모두 e- 접두사. 색·서체는 home.css 의 --e-* 토큰만 쓴다.
 */

/* ── 0) 여닫는 요소 ───────────────────────────────────────────────────
   HTML 의 hidden 속성을 쓰지 않는다. support.js 의 .dc 런타임이 <x-dc> 안을
   다시 그리면서 **hidden 을 벗겨내기 때문**이다(2026-10-16 확인: 서버 HTML
   에는 hidden 이 있고 DOM 에는 없었다). 그래서 data-e-open 으로 여닫고
   JS 가 없을 때를 대비해 마크업에도 hidden 을 함께 적어 둔다.

   순서 주의: hidden 규칙이 [data-e-open] 규칙보다 **먼저** 와야 한다.
   같은 명시도라 나중에 온 규칙이 이긴다. */
[hidden]{display:none !important;}
[data-e-open="false"]{display:none !important;}

/* ── 0-1) 작은 라벨 앞의 초록 점 ─────────────────────────────────────
   원본은 <p class="eyebrow"><span></span>글자</p> 로 점을 그렸다. 그런데
   bake-tx.js 가 문구를 <span data-tx="...">글자</span> 로 감싸기 때문에
   `.e-eyebrow > span`(6×6 점) 규칙이 **글자에도 걸려** 글자가 6px 폭으로
   짜부라졌다(2026-10-16 실측: 폭 6px, 높이 6px).

   그래서 점은 마크업이 아니라 의사요소로 그린다 — 굽힌 span 과 충돌할
   여지가 아예 없다. home.css 의 `.e-eyebrow > span` 규칙은 무력화한다. */
.e-eyebrow::before{content:'';flex:none;width:6px;height:6px;background:var(--e-green);border-radius:50%;}
.e-eyebrow > span{width:auto !important;height:auto !important;background:none !important;border-radius:0 !important;}


/* ── 0-2) 굽힌 문구 span 이 줄을 갈라놓는 문제 ────────────────────────
   bake-tx.js 는 문구 하나하나를 <span data-tx="..."> 로 감싼다. 원본
   마크업이 "글자<br>글자" 처럼 여러 줄이던 자리는 이제 span 이 여러 개로
   나뉘어 **저마다 따로 줄바꿈**된다. 의도한 위치에서만 줄이 갈리도록
   (문장은 한 덩어리로, 강조는 그대로) 여기서 바로잡는다.

   실제로 이 문제로 감정 이입 절의 인용문이 "이번 주 주보도 / (빈 줄) /
   올려야 하는데." 처럼 세 동강이 났다(2026-10-16). */
.e-thoughts > p > span{display:block;}
.e-thoughts > p > span[data-tx]{display:inline;}
.e-thoughts__ending > span{display:block;}
.e-thoughts__ending > span[data-tx]{display:inline;}
.e-story__caption > span{white-space:nowrap;}

/* ── 0-3) 테마 대표 3종 고르는 칩 ────────────────────────────────────
   원본 CSS 는 .immersion 쪽에 있어서 옮겨오지 않았다(이 페이지는 그 절을
   쓰지 않는다). 없으면 칩이 그냥 글자로 붙어 버린다. */
.e-theme-picks{display:flex;flex-wrap:wrap;gap:10px;margin:45px 0 0;}
.e-theme-picks button{background:transparent;border:1px solid var(--e-line);padding:12px 18px;font-size:15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.e-theme-picks button:hover{border-color:var(--e-green);}
.e-theme-picks button[aria-pressed="true"]{background:var(--e-green);border-color:var(--e-green);color:var(--e-white);}

/* ── 0-4) 테마 화면은 '컴팩트' 모드로만 쓴다 ──────────────────────────
   원본은 .theme-showcase__stage 를 position:sticky 로 두고 오른쪽 장을
   길게 스크롤하며 화면을 바꾸는 구성이었다(그래서 장에 min-height:65vh).
   그런데 여기서는 위의 탭으로 화면을 직접 고르는 방식이라 sticky 도,
   긴 장도 필요 없다. 덮지 않으면 테마 구역만 8,977px 로 부푼다
   (2026-10-16 실측 — 화면의 절반을 테마가 차지했다). */
.e-theme-showcase__stage{position:static;align-self:auto;}
.e-theme-scene{min-height:0;padding:25px 0;}

/* ── 0-5) 이야기 두 단의 시작선 맞추기 ───────────────────────────────
   원본은 오른쪽 장을 min-height:75vh 로 두고 가운데 정렬해, 스크롤하며
   한 장씩 넘어가는 연출을 만들었다. 그런데 왼쪽 화면(.e-story__visual)은
   위에서 시작하므로 둘의 첫 줄이 어긋나 보인다(실측: 왼쪽 265px vs
   오른쪽 565px). 여기서는 장을 세로 가운데 대신 위에 붙이고 높이를 내용에
   맡긴다 — 두 단이 같은 줄에서 시작한다. */
.e-story__visual{align-self:start;}
.e-story__copy{align-self:stretch;}
.e-chapter{min-height:0;padding:34px 0;justify-content:flex-start;}
.e-chapter:first-child{padding-top:0;}

/* ── 0-6) 프로젝트 공용 모바일 내비게이션이 내 햄버거/메뉴를 덮는 문제 ──
   ① ezer-store.js 의 mountMobileNav 는 페이지의 메뉴 단추를 찾아
      data-ezer-mnav-hide="1" 을 붙이고, 그 속성에 display:none 을 거는
      스타일을 **런타임에 주입**한다(운영 11개 페이지가 이 시트를 쓴다).
   ② brand.css 의 `@media(max-width:768px){ .e-nav{display:none} }` 도
      같은 이름을 쓴다. 같은 명시도라 **나중에 오는 규칙이 이겨서**
      메뉴를 열어도(.e-nav--open) 안 보였다.

   실측(2026-10-16, 390px): 두 원인 때문에 메뉴 진입이 아예 불가능했다.
   아래 규칙은 이 페이지에만 적용된다.

   ⚠ 이 페이지는 body 에 .s-landing 을 붙이지 않는다. 붙이면 주입되는
   CSS 가 달라져 아래 규칙이 빗나갈 수 있다. */
@media(max-width:768px){
  .e-menu-button[data-ezer-mnav-hide]{display:flex !important;}
  .e-page .e-nav{display:none;}
  .e-page .e-nav--open{display:flex !important;}
}

/* ── 0-7) 작은 화면에서 겹치는 장식 두 가지 ─────────────────────────
   ① .e-scroll-cue 와 .e-hero__index 는 둘 다 히어로 아래쪽에 절대 배치라
      좁은 화면에서 34px 겹쳤다. 스크롤 안내는 폰에서 필요 없다.
   ② .e-contact__word 는 16vw 로 커져 연락 안내와 103px 겹쳤다. */
@media(max-width:700px){
  .e-scroll-cue{display:none;}
  .e-contact__word{font-size:64px;bottom:-.2em;opacity:.05;}
  /* 이야기 두 단은 폰에서 한 단으로 — 원본의 .story__layout{display:block}
     에 해당한다. 700px 규칙만으로는 430px 에서도 2열이 남아 각 단이
     좁아진다(2026-10-16 실측: 430px 에서도 grid 2열). */
  .e-story__layout{display:block;}
  .e-story__visual{margin-bottom:34px;}
  .e-chapter{padding:26px 0;}
}

/* ── 0-8) 한글 본문의 줄간격·줄바꿈 ────────────────────────────────────
   원본 CSS 는 line-height 를 places 곳곳에 적어 두었지만, 적지 않은 요소는
   브라우저 기본값(font-size × 1.2)으로 떨어진다. **한글에 1.2 는 너무 좁다** —
   받침과 윗줄이 붙어 보인다(2026-10-16 실측: 37개 요소가 1.2).

   여기서 **바닥**만 깐다: 이미 더 넉넉한 규칙은 그대로 이긴다(이 규칙은
   파일 맨 끝이라 같은 명시도면 이기지만, `:where()` 로 명시도를 0 으로
   만들어 두어 클래스 선택자에는 지도록 했다). 버튼·알약처럼 한 줄짜리
   요소는 `.e-button` 규칙이 이미 자기 줄간격을 갖고 있다.

   keep-all: 한글은 어절 단위로 끊어야 읽힌다(원본과 같은 판단).
   overflow-wrap: 긴 주소·영문이 컨테이너를 넘지 않게 하는 안전장치. */
:where(h1, h2, h3, h4, p, li, dd, dt, td, th, figcaption, blockquote) {
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 인라인 성격의 요소는 자기 줄상자를 갖지 않으므로 부모의 줄간격을 따르게 둔다 */
:where(a, button, strong, em, span) { word-break: keep-all; }

/* ── 1) 요금 안내 표 ─────────────────────────────────────────────────── */
.e-pricing{margin-top:70px;border-top:1px solid var(--e-line);padding-top:55px;}
.e-pricing__lead{margin-bottom:38px;}
.e-pricing__lead .e-eyebrow{color:var(--e-green);font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;margin-bottom:18px;}
.e-pricing__lead h3{font-size:clamp(24px,2.4vw,34px);line-height:1.5;margin:0 0 14px;}
.e-pricing__lead > p:last-child{font-size:var(--e-text-body);line-height:1.95;color:var(--e-muted);margin:0;max-width:620px;}
.e-pricing__table{width:100%;border-collapse:collapse;table-layout:fixed;}
.e-pricing__table thead th{text-align:left;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--e-muted);border-bottom:1px solid var(--e-line);padding:0 0 14px;}
.e-pricing__table thead th:first-child{width:50%;}
.e-pricing__table thead th:nth-child(2){width:26%;}
.e-pricing__table tbody th{text-align:left;font-weight:400;padding:26px 24px 26px 0;border-bottom:1px solid var(--e-line);vertical-align:top;}
.e-pricing__table tbody td{font-size:19px;font-weight:600;letter-spacing:-.03em;padding:26px 0;border-bottom:1px solid var(--e-line);vertical-align:top;white-space:nowrap;}
.e-pricing__table tbody th strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em;margin-bottom:9px;}
.e-pricing__table tbody th span{display:block;font-size:14px;line-height:1.85;color:var(--e-muted);max-width:340px;}
.e-pricing__table tr.is-featured th strong{color:var(--e-green);}
.e-pricing__table tr.is-featured td{color:var(--e-green);}
.e-pricing__note{font-size:14px;line-height:1.9;color:var(--e-muted);margin:24px 0 0;}
.e-pricing__actions{display:flex;align-items:center;gap:38px;flex-wrap:wrap;margin-top:38px;}
.e-pricing__actions .e-text-link{border-bottom:1px solid var(--e-line);padding-bottom:8px;}

/* 저장 용량 비교. 요금 표와 열이 달라 e-pricing__table 을 재사용하지 않는다
   (좁은 화면의 ::before 가 "제작비/유지보수"로 붙기 때문). */
.e-compare{margin-top:42px;}
.e-compare h3{font-size:clamp(22px,2.2vw,30px);line-height:1.45;margin:0 0 18px;}
.e-compare__table{width:100%;border-collapse:collapse;table-layout:fixed;}
.e-compare__table th,.e-compare__table td{text-align:left;padding:18px 16px 18px 0;border-bottom:1px solid var(--e-line);vertical-align:top;}
.e-compare__table thead th{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--e-muted);padding-bottom:14px;}
.e-compare__table thead th:first-child{width:22%;}
.e-compare__table tbody th{font-size:16px;font-weight:600;}
.e-compare__table tbody td{font-size:16px;}
.e-compare__table tbody td:last-child{color:var(--e-green);font-weight:600;}

/* ── 2) 문의 팝업 ─────────────────────────────────────────────────────
   <dialog> 를 쓰지 않은 이유: 이 페이지는 스크롤을 부드럽게 미끄러뜨리는
   studio.js 와 공존하고, showModal() 의 top-layer 는 배경 스크롤을 막는
   방식이 브라우저마다 다르다. hidden 속성만 켜고 끄면 예측 가능하다. */
.e-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(22,25,27,.55);overflow-y:auto;}
.e-modal__panel{position:relative;background:var(--e-white);width:100%;max-width:560px;padding:44px 44px 38px;margin:auto;box-shadow:0 30px 80px rgba(22,25,27,.24);}
.e-modal__close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;background:transparent;font-size:19px;line-height:1;color:var(--e-muted);cursor:pointer;}
.e-modal__close:hover{color:var(--e-ink);}
.e-modal__form .e-eyebrow{color:var(--e-green);font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;margin-bottom:16px;}
.e-modal__form h2,.e-modal__done h2{font-size:27px;line-height:1.45;margin:0 0 12px;}
.e-modal__lead{font-size:14px;line-height:1.9;color:var(--e-muted);margin:0 0 28px;}
.e-field{display:block;margin-bottom:18px;border:0;padding:0;min-width:0;}
.e-field > span:first-child,.e-field > legend{display:block;font-size:13px;color:var(--e-muted);margin-bottom:8px;padding:0;}
.e-field input[type=text],.e-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--e-line);border-radius:0;padding:13px 14px;font:inherit;font-size:16px;color:var(--e-ink);background:var(--e-paper);}
.e-field textarea{resize:vertical;min-height:120px;line-height:1.75;}
.e-field input[type=text]:focus,.e-field textarea:focus{outline:2px solid var(--e-green);outline-offset:-1px;background:var(--e-white);}
.e-field__site{display:flex;border:1px solid var(--e-line);background:var(--e-paper);}
.e-field__site input[type=text]{border:0;background:transparent;flex:1 1 auto;min-width:0;}
.e-field__site input:focus{outline:none;}
.e-field__site em{font-style:normal;display:flex;align-items:center;padding:0 14px;font-size:14px;color:var(--e-muted);background:var(--e-tint);white-space:nowrap;}
.e-chips{display:flex;flex-wrap:wrap;gap:8px;}
.e-chips label{display:inline-flex;align-items:center;border:1px solid var(--e-line);padding:11px 17px;font-size:14px;cursor:pointer;background:var(--e-white);min-height:44px;box-sizing:border-box;transition:background .2s,color .2s,border-color .2s;}
.e-chips input{position:absolute;opacity:0;width:1px;height:1px;}
.e-chips label:has(input:checked){background:var(--e-green);border-color:var(--e-green);color:var(--e-white);}
.e-chips label:has(input:focus-visible){outline:2px solid var(--e-green);outline-offset:2px;}
.e-agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;color:var(--e-muted);margin:6px 0 22px;}
.e-agree input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--e-green);}
.e-agree a{color:var(--e-green);text-decoration:underline;}
.e-modal__form .e-button{width:100%;justify-content:center;}
.e-modal__msg{font-size:13.5px;line-height:1.7;color:#b5473f;min-height:22px;margin:12px 0 0;}
.e-modal__done{text-align:center;padding:14px 0 6px;}
.e-modal__done p{font-size:14.5px;line-height:1.9;color:var(--e-muted);margin:0 0 8px;}
.e-modal__done strong{color:var(--e-ink);}
.e-modal__done .e-button{width:auto;margin-top:18px;padding-inline:34px;}

/* 연락 단추 두 개가 나란히 — 좁은 화면에서는 위아래로 */
.e-contact__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:none;}
.e-button--ghost{background:transparent;color:var(--e-white);border:1px solid rgba(255,255,255,.45);}
.e-button--ghost:hover{background:rgba(255,255,255,.12);color:var(--e-white);}

/* 이야기 장의 꼬리표와 '더 보기' 링크 — 원본의 몰입형 스토리 꼬리표 자리 */
.e-chapter__badge{display:inline-block;padding:10px 0;border-bottom:1px solid var(--e-line);color:var(--e-green);font-size:14px;}
.e-theme-scene__link{display:inline-block;margin-top:22px;color:var(--e-green);font-weight:600;font-size:15px;border-bottom:1px solid var(--e-green);padding-bottom:4px;}
.e-faq-more{margin:26px 0 0;font-size:15px;}
.e-faq-more a{color:var(--e-green);font-weight:600;border-bottom:1px solid var(--e-line);padding-bottom:4px;}

@media (max-width:720px){
  .e-pricing{margin-top:50px;padding-top:40px;}

  /* 요금 비교 — 좁은 화면에서는 표를 세로로 푼다.
     그냥 풀면 **열 머리글(제작비·유지보수)이 사라져** "월 55,000원"이 무슨
     값인지 알 수 없다(2026-10-16 실측: 470px 에서 thead 가 display:none).
     그래서 요금제 이름을 한 줄 차지하게 하고, 값 앞에 이름표를 붙인다.
     이름표는 HTML 의 data-tx 가 아니라 CSS 의 ::before 로 만든다 —
     data-tx 안에 넣으면 굽기(bake) 규칙과 얽힌다. */
  .e-pricing__table,.e-pricing__table tbody,.e-pricing__table tr,
  .e-pricing__table th,.e-pricing__table td{display:block;width:auto;}
  .e-pricing__table thead{display:none;}   /* 표 머리글 대신 값마다 이름표 */
  .e-pricing__table tbody tr{border-bottom:1px solid var(--e-line);padding-bottom:26px;}
  .e-pricing__table tbody tr:last-child{border-bottom:0;}

  /* 요금제 이름은 자기 줄, 값은 오른쪽 정렬로 한 쌍씩 */
  .e-pricing__table tbody th{padding:26px 0 14px;border-bottom:0;max-width:none;}
  .e-pricing__table tbody th strong{font-size:19px;margin-bottom:8px;}
  .e-pricing__table tbody th span{max-width:none;font-size:15.5px;}
  .e-pricing__table tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    border-bottom:0;padding:7px 0;font-size:17.5px;white-space:nowrap;
  }
  .e-pricing__table tbody td::before{
    content:'';flex:none;font-size:14.5px;font-weight:400;letter-spacing:0;
    color:var(--e-muted);white-space:nowrap;
  }
  .e-pricing__table tbody td.e-price::before{content:'제작비';}
  .e-pricing__table tbody td.e-care::before{content:'유지보수';}
  .e-pricing__table tbody td.e-care{color:var(--e-muted);}
  /* 인기 요금제만 초록으로 남겨 시선이 먼저 닿게 한다 */
  .e-pricing__table tbody tr.is-featured td.e-price{color:var(--e-green);}
  .e-pricing__table tbody tr:last-child td:last-child{padding-bottom:0;}

  .e-pricing__actions{gap:22px;}
  .e-pricing__actions .e-button{width:100%;justify-content:center;}

  /* 저장 용량 비교 — 요금 표(제작비/유지보수)와 열이 달라서 이름표를 따로 둔다. */
  .e-compare__table thead{display:none;}
  .e-compare__table,.e-compare__table tbody,.e-compare__table tr,
  .e-compare__table th,.e-compare__table td{display:block;width:auto;}
  .e-compare__table tbody tr{border-bottom:1px solid var(--e-line);padding-bottom:18px;}
  .e-compare__table tbody th{padding:18px 0 8px;border-bottom:0;}
  .e-compare__table td{border-bottom:0;padding:6px 0;font-weight:400;}
  .e-compare__table td::before{
    content:'';display:block;font-size:13px;font-weight:500;color:var(--e-muted);margin-bottom:2px;
  }
  .e-compare__table td:nth-child(2)::before{content:'기존 교회 홈페이지';}
  .e-compare__table td:nth-child(3)::before{content:'에제르 스튜디오';}
  .e-modal{padding:0;align-items:flex-start;}
  .e-modal__panel{max-width:none;min-height:100%;padding:34px 22px 30px;}
  .e-modal__form h2,.e-modal__done h2{font-size:23px;}
  .e-contact__actions{width:100%;}
  .e-contact__actions .e-button{width:100%;justify-content:center;}
}


/* ── 공감(#empathy) · 요금(.e-pricing) 개편 (2026-10-29) ─────────────────
   DESIGN.md 눈금만 쓴다. 이 두 블록 밖에는 영향을 주지 않도록 전부 범위를 건다. */
@font-face{font-family:'NMF Classic';src:url('/fonts/NMFClassic-Medium.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
#empathy,.e-pricing{--x-ink:#14291c;--x-mute:#5f7566;--x-line:#dfe7e1;--x-primary:#256b38;--x-press:#1b4f2a;--x-soft:#d6e8db;--x-display:'NMF Classic','Gowun Batang',serif;}
#empathy .e-section-label,#empathy .e-eyebrow{color:var(--x-mute);}
#empathy .e-empathy__layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
#empathy .e-empathy__head{grid-column:1/-1;position:static;margin-bottom:24px;}
#empathy .e-empathy__head .e-eyebrow{position:relative;margin-bottom:24px;}
#empathy .e-empathy__head .e-eyebrow::before{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:8px;}
#empathy .e-thoughts{display:contents;list-style:none;margin:0;padding:0;}
#empathy .e-thought{box-sizing:border-box;background:#fff;border:1px solid var(--x-line);border-radius:16px;padding:32px;box-shadow:0 1px 3px rgba(20,41,28,.06);display:flex;flex-direction:column;gap:16px;}
#empathy .e-thought__no{font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.4;letter-spacing:.1px;color:var(--x-primary);}
#empathy .e-thought__quote{margin:0;font-family:var(--x-display);font-weight:400;font-size:22px;line-height:1.5;letter-spacing:-.2px;color:var(--x-ink);word-break:keep-all;text-wrap:pretty;}
/* 관리자 편집기에 저장된 문구(t322)에 style="font-size:24px"가 들어 있어 인라인 크기를 무시한다 */
#empathy .e-thought__quote span{display:inline;font:inherit!important;color:inherit!important;}
#empathy .e-empathy__ending{grid-column:1/-1;margin:16px 0 0;font-size:17px;line-height:1.7;color:var(--x-mute);}
#empathy .e-empathy__ending strong{color:var(--x-primary);font-weight:700;}

.e-pricing__lead{margin-bottom:32px;}
.e-pricing__lead .e-eyebrow{font-size:13px;margin-bottom:16px;}
.e-pricing__lead h3{font-size:32px;line-height:1.25;letter-spacing:-.4px;margin:0;color:var(--x-ink);}
.e-plans{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.e-plan{box-sizing:border-box;position:relative;background:#fff;border:1px solid var(--x-line);border-radius:16px;padding:32px;box-shadow:0 1px 3px rgba(20,41,28,.06);display:flex;flex-direction:column;}
.e-plan.is-featured{border-color:var(--x-primary);box-shadow:inset 0 0 0 1px var(--x-primary),0 1px 3px rgba(20,41,28,.06);}
.e-plan__top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.e-plan__name{margin:0;font-size:18px;font-weight:700;line-height:1.4;color:var(--x-ink);}
.e-plan__badge{font-size:13px;line-height:1.4;font-weight:500;color:var(--x-primary);background:var(--x-soft);border-radius:9999px;padding:4px 12px;}
.e-plan__desc{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--x-mute);word-break:keep-all;text-wrap:pretty;}
.e-plan__price{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--x-line);display:flex;flex-direction:column;gap:8px;}
.e-plan__price>div{display:flex;flex-direction:column;}
.e-plan__price>div+div{flex-direction:row;align-items:baseline;gap:8px;}
.e-plan__price dt{font-size:13px;line-height:1.4;color:var(--x-mute);}
.e-plan__price dd{margin:0;}
.e-plan__amount{font-family:var(--x-display);font-size:32px;line-height:1.25;letter-spacing:-.4px;color:var(--x-ink);margin-top:4px!important;}
.e-plan.is-featured .e-plan__amount{color:var(--x-primary);}
.e-plan__care{font-size:15px;line-height:1.6;font-weight:500;color:var(--x-ink-2,#2b4434);}
.e-plan__cta{box-sizing:border-box;margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:9999px;font-size:14px;line-height:1;text-decoration:none;transition:background .2s,color .2s;}
.e-plan__price{margin-bottom:24px;}
.e-plan__cta--primary{background:var(--x-primary);color:#fff;}
.e-plan__cta--primary:hover{background:var(--x-press);}
.e-plan__cta--secondary{background:#fff;color:var(--x-primary);border:1px solid var(--x-primary);}
.e-plan__cta--secondary:hover{background:var(--x-soft);}
.e-plan__cta:focus-visible,.e-pill:focus-visible{outline:3px solid rgba(37,107,56,.35);outline-offset:2px;}
.e-pricing .e-pricing__note{margin:24px 0 0;font-size:13px;line-height:1.4;color:var(--x-mute);}
.e-storage{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:16px 0 0;padding:8px 16px;border-radius:9999px;background:var(--x-soft);font-size:15px;line-height:1.6;color:var(--x-ink);scroll-margin-top:96px;}
.e-storage strong{color:var(--x-primary);font-weight:700;}
.e-storage span{color:#2b4434;}
.e-pricing .e-pricing__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px;}
.e-pill{box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:9999px;background:var(--x-primary);color:#fff;font-size:14px;line-height:1.4;text-decoration:none;transition:background .2s;}
.e-pill:hover{background:var(--x-press);}
.e-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none;}
.e-pricing .e-text-link{font-size:15px;color:var(--x-primary);}
@media (max-width:960px){
  #empathy .e-empathy__layout,.e-plans{grid-template-columns:1fr;}
}
@media (max-width:720px){
  #empathy .e-empathy__layout{gap:16px;}
  #empathy .e-empathy__head{margin-bottom:16px;}
  #empathy .e-empathy__layout h2 br{display:none;}
  .e-pricing__lead h3{font-size:26px;letter-spacing:-.2px;}
  .e-pricing .e-pricing__actions .e-pill{width:100%;justify-content:center;}
  .e-storage{border-radius:16px;}
  #empathy .e-empathy__ending strong{display:block;}
}