/* Tempocket 홈페이지 — 앱과 같은 색(종이빛, 등불 주황), 같은 글꼴 */
/* 한국어: 제목·단추 ONE 모바일 POP, 본문 강원교육모두체 Bold(둘 다 assets/fonts, 무료·상업 이용 가능, 한자는 빈 글자라 unicode-range로 뺌). 로고 글자는 Bagel Fat One */
@font-face{font-family:"ONE Mobile POP";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/one-mobile-pop-400-normal.woff") format("woff");unicode-range:U+0000-33FF,U+A000-F8FF,U+FB00-FFFF}
@font-face{font-family:"Gangwon Edu";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/gangwon-edu-bold.woff") format("woff");unicode-range:U+0000-33FF,U+A000-F8FF,U+FB00-FFFF}
html{--f-display:"ONE Mobile POP","Mochiy Pop One",sans-serif;--f-body:"Gangwon Edu","Zen Maru Gothic","Apple SD Gothic Neo",sans-serif;--f-hand:"Poor Story","Klee One",cursive;--w-body:400}
html[lang="ja"],html[lang="en"]{--w-body:500}
html[lang="ja"]{--f-display:"Mochiy Pop One","Hiragino Maru Gothic ProN",sans-serif;--f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;--f-hand:"Klee One",cursive}
html[lang="en"]{--f-display:"Bagel Fat One",sans-serif;--f-body:"Zen Maru Gothic",sans-serif;--f-hand:"Klee One",cursive}
/* 번체 중국어(대만): Huninn·Iansui / 태국어: Mitr·Mali·Itim (Google Fonts, 앱과 같은 글꼴) */
html[lang="zh-Hant"]{--f-display:"Huninn","PingFang TC",sans-serif;--f-body:"Huninn","PingFang TC",sans-serif;--f-hand:"Iansui",cursive;--w-body:400}
html[lang="th"]{--f-display:"Mitr","Thonburi",sans-serif;--f-body:"Mali","Thonburi",sans-serif;--f-hand:"Itim",cursive;--w-body:500}
/* 영어·일본어 제목 글꼴은 로고만 Bagel Fat One */
.logo-word{font-family:"Bagel Fat One",sans-serif}

:root{color-scheme:light;
  --paper:#fbf6ea;--paper-2:#f3ead8;--card:#fffcf4;--ink:#3a342c;--muted:#7d7466;--line:rgba(58,52,44,.12);
  --lamp:#f2a64a;--lamp-edge:#c7792a;--lamp-ink:#4a2e10;--red:#b8433a;--moss:#6f8f4e;--sky:#cfe0e6;--sky-2:#b9d0dc;
  --night:#1d1d4a;--night-2:#3a2f5e;--night-ink:#f6eee2;
  --radius:22px;--wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-weight:var(--w-body);font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:break-word}
html[lang="en"] body,html[lang="ja"] body,html[lang="zh-Hant"] body,html[lang="th"] body{word-break:normal}
html[lang="ja"] body,html[lang="zh-Hant"] body{line-break:strict}
.steps>*,.feature>*,.promise>*,.cards>*{min-width:0}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance;font-family:var(--f-display);font-weight:400;line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 언어: 고른 언어의 블록만 보인다 */
html:not([data-lang="ko"]) [data-l="ko"],
html:not([data-lang="ja"]) [data-l="ja"],
html:not([data-lang="en"]) [data-l="en"],
html:not([data-lang="zh"]) [data-l="zh"],
html:not([data-lang="th"]) [data-l="th"]{display:none!important}

/* ---------- 머리 ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.45rem;margin-right:auto}
.brand svg,.brand .logo-icon{width:36px;height:36px;flex:none}.brand .logo-icon{border-radius:22%;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;padding:8px 12px;border-radius:999px;font-size:.95rem;color:var(--muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--paper-2)}
/* 언어 고르기: 지구 그림 + 언어 이름 드롭다운(언어가 늘어나도 자리를 더 차지하지 않게). 진짜 <select>를 그대로 써서 폰에서는 기본 고르기 화면 */
.langs{position:relative;display:flex;align-items:center;background:var(--paper-2);border-radius:999px;color:var(--muted);cursor:pointer}
.langs:hover,.langs:focus-within{color:var(--ink)}
.langs>svg{position:absolute;left:10px;width:16px;height:16px;pointer-events:none}
.langs>svg.chev{left:auto;right:10px;width:12px;height:12px}
.langs select{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;font-family:var(--f-body);font-size:.88rem;line-height:1.2;padding:8px 30px 8px 32px;border-radius:999px;cursor:pointer}
.langs select:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.langs option{color:#3a342c;background:#fffcf4}
.menu-btn{display:none;border:0;background:var(--paper-2);width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:20px;height:20px}
@media (max-width:820px){
  .menu-btn{display:grid;place-items:center}
  .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px 16px;display:none}
  .top.open .nav{display:flex}
  .nav a{padding:12px 14px;font-size:1rem}
  .langs select{font-size:16px}  /* 아이폰은 16px보다 작은 칸을 누르면 화면을 확대함 */
}

/* ---------- 단추 (앱 단추처럼 아래 두께가 있는) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-family:var(--f-display);font-size:1.05rem;
  padding:14px 26px;border-radius:999px;background:var(--lamp);color:var(--lamp-ink);box-shadow:0 5px 0 var(--lamp-edge);transition:transform .12s,box-shadow .12s;line-height:1.2}
.btn:hover{transform:translateY(1px);box-shadow:0 4px 0 var(--lamp-edge)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--lamp-edge)}
.btn.ghost{background:var(--card);color:var(--red);box-shadow:0 5px 0 #e2c9a6}
.btn.small{padding:9px 18px;font-size:.92rem;box-shadow:0 4px 0 var(--lamp-edge)}
.btn svg{width:22px;height:22px;flex:none}
.store{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;border-radius:14px;padding:10px 20px 10px 16px;text-decoration:none;line-height:1.15;font-family:var(--f-body)}
.store svg{width:26px;height:26px}
.store small{display:block;font-size:.72rem;opacity:.8}
.store b{font-size:1.1rem;font-weight:700}
.store[aria-disabled="true"]{background:#5b554c;cursor:default}
.soon{display:block;font-size:.85rem;color:var(--muted);margin-top:10px}

/* ---------- 휴대폰 틀 ---------- */
/* 휴대폰 틀: 아이폰처럼 얇은 검은 베젤 + 티타늄 테 + 옆 버튼. 상태 표시줄과 다이내믹 아일랜드는 스크린샷 안에 들어 있다 */
.phone{position:relative;flex:none;width:100%;max-width:300px;padding:1%;border-radius:14.4%/6.6%;background:#050506;
  box-shadow:0 0 0 1.2px #a7a8ad,0 0 0 2.3px #5d5e63,0 0 0 2.8px #2a2a2d,0 34px 60px -22px rgba(40,30,20,.5)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;background:linear-gradient(90deg,#4b4c50,#a2a3a8);border-radius:2px}
.phone::before{left:-4.6px;top:19%;height:8%;box-shadow:0 calc(var(--bh,1px)*0) 0 transparent}
.phone::after{right:-4.6px;top:26%;height:11%;background:linear-gradient(270deg,#4b4c50,#a2a3a8)}
.phone img,.phone video{display:block;width:100%;height:auto;aspect-ratio:393/852;object-fit:cover;border-radius:13.6%/6.25%;background:#000}

/* ---------- 첫 화면 ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 78%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:40px}
.hero h1{font-size:clamp(3rem,8vw,5.2rem);margin-bottom:.1em}
.hero .tag{font-family:var(--f-hand);font-size:clamp(1.4rem,3.4vw,1.9rem);color:var(--muted);margin-bottom:.9em;line-height:1.4}
/* 한국어 문구는 앱 제목 아래와 같은 강원교육모두체로 */
html[lang="ko"] .hero .tag{font-family:"Gangwon Edu",var(--f-body)}
.hero .lead{font-size:1.1rem;max-width:30em}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.phones{position:relative;display:flex;justify-content:center;min-height:520px}
.phones .phone{max-width:270px}
.phones .phone.back{position:absolute;right:2%;top:60px;max-width:230px;transform:rotate(6deg);opacity:.96}
.phones .phone.front{position:relative;left:-12%;transform:rotate(-3deg);z-index:2}
.hills{display:block;width:100%;height:auto;margin-top:-1px}
.hills path{fill:var(--paper-2)}
.hills path+path{fill:var(--paper)}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:36px}
  .hero .lead{margin:0 auto}
  .hero .cta{justify-content:center}
  .phones{min-height:0;margin-top:10px}
  .phones .phone.front{left:-10%;max-width:220px}
  .phones .phone.back{max-width:190px;top:40px;right:6%}
}

/* ---------- 구역 공통 ---------- */
section{padding:84px 0}
.eyebrow{display:inline-block;font-size:.85rem;letter-spacing:.06em;color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent);padding:4px 12px;border-radius:999px;margin-bottom:14px}
.head{text-align:center;max-width:760px;margin:0 auto 52px}
.head h2{font-size:clamp(1.9rem,4.4vw,2.7rem)}
.head p{color:var(--muted)}

/* 돌 → 탑 → 꽃 세 걸음 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{background:var(--card);border-radius:var(--radius);padding:28px 26px;border:1px solid var(--line);position:relative}
.step svg{width:64px;height:64px;margin-bottom:14px}
.step h3{font-size:1.3rem}
.step p{color:var(--muted);margin:0;font-size:.98rem}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* 기능 줄 */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0}
.feature + .feature{border-top:1px dashed var(--line)}
.feature.flip .shots{order:2}
.feature .shots{display:flex;justify-content:center;align-items:flex-start;gap:18px}
.feature .shots .phone{max-width:240px;flex:1 1 0}
.feature .shots .phone + .phone{margin-top:48px}
.feature h3{font-size:clamp(1.6rem,3.4vw,2.1rem)}
.feature .txt p{color:var(--muted)}
.feature ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.feature li{display:flex;gap:10px;align-items:flex-start}
.feature li::before{content:"";flex:none;width:10px;height:10px;margin-top:.62em;border-radius:50%;background:var(--moss);box-shadow:0 0 0 4px color-mix(in srgb,var(--moss) 18%,transparent)}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:28px;text-align:left}
  .feature.flip .shots{order:0}
  .feature .shots .phone{max-width:44vw}
}

/* 밤 구역: 소원 등불 */
.night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);color:var(--night-ink);position:relative;overflow:hidden}
.night .txt p,.night .head p{color:rgba(246,238,226,.78)}
.night .eyebrow{color:#ffd59a;background:rgba(255,213,154,.12)}
.night .feature li::before{background:#ffd59a;box-shadow:0 0 0 4px rgba(255,213,154,.18)}
.stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent),radial-gradient(1px 1px at 32% 8%,#fff9 50%,transparent),radial-gradient(1.5px 1.5px at 68% 22%,#fff7 50%,transparent),radial-gradient(1px 1px at 84% 12%,#fffa 50%,transparent),radial-gradient(1px 1px at 52% 30%,#fff6 50%,transparent),radial-gradient(1.5px 1.5px at 92% 40%,#fff6 50%,transparent),radial-gradient(1px 1px at 6% 46%,#fff7 50%,transparent)}
.floating{position:absolute;width:16px;height:20px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 60%,#ffe7b0,#f2a64a 60%,#c7792a);box-shadow:0 0 22px 6px rgba(242,166,74,.45);animation:rise 14s linear infinite;opacity:0}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.7}100%{transform:translateY(-520px);opacity:0}}
@media (prefers-reduced-motion:reduce){.floating{animation:none;display:none}html{scroll-behavior:auto}}

/* 스님 여섯 */
.monks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.monk{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 8px 10px;text-align:center;font-size:.92rem;color:var(--muted)}
.monk img{width:84%;margin:0 auto 4px;aspect-ratio:1;object-fit:contain}
.monk.more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:dashed;background:transparent;line-height:1.35;font-size:.85rem}
.monk.more .plus{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--lamp);color:var(--lamp-ink);font-family:"Bagel Fat One",sans-serif;font-size:1.7rem;line-height:1;box-shadow:0 3px 0 var(--lamp-edge)}
/* 절 모양 세 가지 */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;justify-items:center}
.styles figure{margin:0;width:100%;max-width:250px;display:flex;flex-direction:column;align-items:center;gap:14px}
.styles figcaption{font-family:var(--f-display);font-size:1.15rem}
@media (max-width:820px){.styles{grid-template-columns:repeat(3,1fr);gap:10px}.styles figcaption{font-size:.9rem;text-align:center}}

/* 약속 카드 */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.promise div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.promise svg{width:40px;height:40px;margin-bottom:10px;color:var(--moss)}
.promise h3{font-size:1.15rem}
.promise p{color:var(--muted);margin:0;font-size:.96rem}
@media (max-width:820px){.promise{grid-template-columns:1fr}}

/* 다운로드 */
.download{text-align:center}
.download .box{background:linear-gradient(160deg,var(--night),var(--night-2));color:var(--night-ink);border-radius:32px;padding:64px 24px;position:relative;overflow:hidden}
.download h2{font-size:clamp(1.9rem,4.4vw,2.6rem)}
.download p{color:rgba(246,238,226,.8)}
.download .soon{color:rgba(246,238,226,.7)}
.download .store{background:#fff;color:#111;margin-top:10px}
.download .store[aria-disabled="true"]{background:rgba(255,255,255,.85)}

/* ---------- 문서 페이지 (약관, 개인정보, FAQ, 지원) ---------- */
.page-head{background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 100%);padding:56px 0 34px}
.page-head h1{font-size:clamp(2rem,5vw,3rem)}
.page-head p{color:var(--muted);margin:0}
.doc{max-width:780px;margin:0 auto;padding:16px 20px 90px}
.doc h2{font-family:var(--f-body);font-weight:700;font-size:1.25rem;margin:2.2em 0 .6em;padding-top:.4em}
.doc h3{font-family:var(--f-body);font-weight:700;font-size:1.05rem;margin:1.4em 0 .4em}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 1em}
.doc li{margin:.25em 0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:.95rem}
.doc th,.doc td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--paper-2);font-weight:700}
.doc .meta{color:var(--muted);font-size:.92rem}
.toc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin:8px 0 28px}
.toc ol{margin:0;columns:2;column-gap:28px}
.toc a{text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink)}
@media (max-width:640px){.toc ol{columns:1}.doc table{font-size:.88rem}.doc th,.doc td{padding:8px}}
.table-scroll{overflow-x:auto}

/* FAQ */
.faq-cats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.faq-cats a{text-decoration:none;font-size:.9rem;background:var(--card);border:1px solid var(--line);padding:6px 14px;border-radius:999px;color:var(--muted)}
.faq-cats a:hover{color:var(--ink)}
.faq h2{font-family:var(--f-display);font-weight:400;font-size:1.4rem;margin:1.8em 0 .7em}
details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:0 0 10px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:16px 50px 16px 20px;position:relative;font-weight:700}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details .a{padding:0 20px 16px;color:var(--muted)}
details .a p:last-child{margin:0}

/* 지원 */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:10px 0 30px}
.cards a,.cards div{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;text-decoration:none}
.cards h3{margin:0 0 .3em;font-family:var(--f-display);font-weight:400;font-size:1.15rem}
.cards p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.form{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
.form input,.form select,.form textarea{font:inherit;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px;width:100%}
.form textarea{min-height:150px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.form .note{font-size:.88rem;color:var(--muted);margin:0}
.care{background:color-mix(in srgb,var(--moss) 10%,var(--card));border:1px solid color-mix(in srgb,var(--moss) 30%,transparent);border-radius:22px;padding:24px;margin-top:34px}
.care h2{margin-top:0}
.care dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.care dt{font-weight:700;white-space:nowrap}
.care dd{margin:0;color:var(--muted);word-break:normal;overflow-wrap:anywhere;min-width:0}
.mail{font-weight:700;color:var(--red)}

/* ---------- 바닥 ---------- */
footer{background:var(--paper-2);padding:44px 0 36px;font-size:.92rem;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-start}
footer .brand{font-size:1.2rem;color:var(--ink);margin-right:0}
footer .cols{display:flex;gap:48px;flex-wrap:wrap;margin-left:auto}
footer h4{margin:0 0 8px;color:var(--ink);font-size:.95rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
footer .copy{flex-basis:100%;border-top:1px solid var(--line);padding-top:18px;font-size:.85rem}

/* 나타나기 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* 문의 양식: 예시 글은 더 연하게, 꼭 적어야 하는 칸은 붉은 * */
.form ::placeholder{color:var(--muted);opacity:.5}
.form .req{color:#c8463a;font-style:normal;margin-left:3px}
/* 목차를 눌러 섹션으로 갈 때 위에 붙은 머리 메뉴에 가리지 않게 */
html{scroll-padding-top:96px}
/* 글을 누르면 깜박이는 입력 커서가 보이지 않게(브라우저 캐럿 브라우징이 켜져 있을 때). 문의 양식의 입력 칸은 그대로 */
body{caret-color:transparent}
input,textarea,select,[contenteditable]{caret-color:auto}

/* ---------- 잔잔한 배경(앱스토어 스크린샷과 같은 결): 한지 결, 옅은 원상(붓으로 그린 열린 동그라미), 먹 번진 산 능선 ----------
   모두 아주 옅게. 홈페이지는 다크 모드 없이 늘 밝은 화면. 장식은 pointer-events 없음, 글은 늘 그 위(.wrap z-index 1) */
:root{--grain-o:.55;--enso:rgba(120,96,70,.085);--ridge:#6b5a48;--ridge-o1:.10;--ridge-o2:.16;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .1' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --enso-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1500'%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='none' stroke='%23000' stroke-linecap='round' transform='rotate(-58 750 750)'%3E%3Ccircle cx='750' cy='750' r='600' stroke-width='70' stroke-dasharray='3200 570'/%3E%3Ccircle cx='750' cy='750' r='575' stroke-width='22' stroke-dasharray='2700 900' stroke-dashoffset='-250' opacity='.6'/%3E%3Ccircle cx='750' cy='750' r='628' stroke-width='14' stroke-dasharray='1900 1800' stroke-dashoffset='-900' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --ridge-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cfilter id='s'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath filter='url(%23s)' fill='url(%23a)' d='M0 120C160 70 260 40 380 70S560 20 700 10 860 90 1000 80 1180 20 1300 40 1400 60 1440 70V300H0Z'/%3E%3Cpath filter='url(%23s)' fill='url(%23c)' d='M0 200C150 160 280 130 420 170S600 140 760 120 960 190 1100 180 1320 130 1440 150V300H0Z'/%3E%3C/svg%3E")}

/* 한지 결: 페이지 전체 위에 아주 옅게(스크린샷·영상에도 거의 안 보일 만큼) */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background-image:var(--grain);opacity:var(--grain-o);mix-blend-mode:multiply}

/* 원상: 섹션마다 좌우를 번갈아, 제목 뒤쪽에 크게 걸치도록 */
section{position:relative}
#features,#monks,#styles{overflow-x:clip}
section>.wrap{position:relative;z-index:1}
.hero::before,#features::before,#monks::before,#styles::before,.page-head::before{content:"";position:absolute;pointer-events:none;z-index:0;
  width:min(720px,110vw);aspect-ratio:1;background:var(--enso);-webkit-mask:var(--enso-svg) center/contain no-repeat;mask:var(--enso-svg) center/contain no-repeat}
.hero::before{left:-170px;top:-40px;width:min(640px,100vw);transform:rotate(18deg)}
#features::before{left:-260px;top:40px;transform:rotate(-40deg)}
#monks::before{right:-240px;top:-60px;transform:rotate(70deg) scale(.85)}
#styles::before{left:-220px;top:20%;transform:rotate(130deg) scale(.75)}
.page-head{position:relative;overflow:hidden}
.page-head>.wrap{position:relative;z-index:1}
.page-head::before{right:max(16px,calc(50% - 470px));top:50%;width:170px;transform:translateY(-50%) rotate(25deg)}

/* 먹 번진 산 능선: 첫 화면 아래 언덕 뒤, 다운로드 칸 위 */
.hero::after,.download::before{content:"";position:absolute;left:0;right:0;pointer-events:none;background:var(--ridge);-webkit-mask:var(--ridge-svg) center/100% 100% no-repeat;mask:var(--ridge-svg) center/100% 100% no-repeat}
.hero::after{bottom:30px;height:clamp(120px,18vw,260px);opacity:var(--ridge-o2);z-index:0}
.hero .hills{position:relative;z-index:1}
.download::before{top:-40px;height:clamp(90px,12vw,170px);opacity:var(--ridge-o1);z-index:0}
.download>.wrap{position:relative;z-index:1}