@font-face { font-family:"Stimoa Jua"; src:url("/assets/fonts/Jua_400Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Stimoa Noto"; src:url("/assets/fonts/NotoSansKR_400Regular.ttf") format("truetype"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Stimoa Noto"; src:url("/assets/fonts/NotoSansKR_700Bold.ttf") format("truetype"); font-style:normal; font-weight:700; font-display:swap; }
:root { --ink:#2B2B2B; --soft:#7C7263; --cream:#FFF8EC; --yellow:#FFC61A; --pale:#FFF1CC; --border:#EDE1C9; --coral:#C2562E; --green:#1E7A46; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"Stimoa Noto", "Apple SD Gothic Neo", Arial, sans-serif; line-height:1.6; } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid var(--coral); outline-offset:4px; } .skip-link { position:absolute; left:1rem; top:-4rem; background:var(--ink); color:white; padding:.75rem 1rem; z-index:10; } .skip-link:focus { top:1rem; }
.site-header, .hero, .intro, .steps, .modes, .privacy, .closing, footer { width:min(1180px, calc(100% - 48px)); margin:0 auto; } .site-header { min-height:104px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { font-family:"Stimoa Jua", sans-serif; font-size:2.2rem; line-height:1; letter-spacing:-.04em; color:var(--ink); } .brand span { color:var(--yellow); font-family:"Stimoa Noto", sans-serif; font-size:1.05rem; vertical-align:top; } nav { display:flex; gap:2.2rem; font-size:.95rem; font-weight:700; } nav a:hover, .text-link:hover { color:var(--brand, #A06A00); } .header-action, .button { border-radius:999px; font-weight:900; display:inline-flex; align-items:center; justify-content:center; gap:.7rem; transition:transform .2s ease, box-shadow .2s ease; } .header-action { padding:.8rem 1.3rem; background:var(--ink); color:white; font-size:.9rem; } .button { padding:1rem 1.4rem; } .button:hover, .header-action:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(43,43,43,.14); } .button-primary { background:var(--yellow); } .button-dark { background:var(--ink); color:white; }
.hero { min-height:650px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:3rem; padding:3rem 0 5rem; } h1,h2,h3 { font-family:"Stimoa Jua", sans-serif; font-weight:400; letter-spacing:-.045em; line-height:1.14; } h1 { margin:0; font-size:clamp(3.5rem, 5.5vw, 4.8rem); } h1 span,h1 strong { display:block; white-space:nowrap; } h1 strong { color:var(--yellow); font-weight:inherit; } .hero-copy>p { max-width:30rem; margin:1.7rem 0 2.1rem; color:var(--soft); font-size:1.08rem; } .hero-actions { display:flex; align-items:center; gap:1.5rem; } .text-link { font-weight:800; border-bottom:2px solid var(--ink); padding:.25rem 0; } .hero-visual { min-height:480px; position:relative; display:grid; place-items:center; } .hero-sticker { position:absolute; object-fit:contain; z-index:2; filter:drop-shadow(0 16px 22px rgba(160,106,0,.12)); } .hero-star { width:min(35%, 190px); left:1%; top:9%; transform:rotate(-12deg); } .hero-certificate { width:min(39%, 205px); right:0; bottom:-7%; transform:rotate(13deg); opacity:.95; } .phone-preview { width:min(70%, 334px); min-height:460px; padding:1.4rem 1.25rem; border:8px solid white; border-radius:38px; background:#fffdf8; box-shadow:0 22px 35px rgba(72,51,10,.16); transform:rotate(5deg); position:absolute; right:13%; top:3%; text-align:center; z-index:1; } .phone-top { display:flex; justify-content:space-between; font-weight:800; font-size:.8rem; } .avatar { width:126px; height:126px; object-fit:contain; background:#FFE294; border-radius:50%; margin:1rem auto .3rem; } .phone-preview p { font-weight:800; margin:.2rem 0 .8rem; } .board { display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; padding:.5rem; background:var(--pale); border-radius:18px; } .board img,.board span { width:100%; aspect-ratio:1; object-fit:contain; border-radius:10px; background:#fff; padding:.15rem; color:#c7bda8; font-size:1.35rem; display:grid; place-items:center; } .phone-preview strong { display:block; color:var(--green); text-align:right; margin-top:.6rem; }
.intro { padding:9rem 0; max-width:820px; text-align:center; } .section-number { color:#A06A00; font-weight:900; letter-spacing:.08em; margin:0 0 .6rem; } h2 { margin:.2rem 0 1.2rem; font-size:clamp(2.4rem,4.5vw,4.5rem); } .intro>p:last-child { color:var(--soft); font-size:1.15rem; }
.steps { padding:7rem 0; border-top:1px solid var(--border); } .section-heading { max-width:650px; } .steps ol { list-style:none; padding:0; margin:3.3rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; } .steps li { border-top:2px solid var(--ink); padding-top:1.25rem; } .steps li>span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--yellow); font-weight:900; } h3 { margin:1.4rem 0 .55rem; font-size:1.75rem; } .steps p,.mode-grid p,.privacy p { color:var(--soft); margin:0; }
.modes { padding:8rem 0; } .mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:3rem; } .mode-grid article { min-height:270px; padding:2.5rem; background:white; border:1px solid var(--border); border-radius:30px; position:relative; overflow:hidden; } .mode-grid article:nth-child(2) { background:var(--pale); } .mode-grid img { width:130px; height:130px; object-fit:contain; position:absolute; right:1.7rem; top:1.5rem; opacity:.97; } .mode-grid h3,.mode-grid p { max-width:52%; position:relative; }
.privacy { display:grid; grid-template-columns:280px 1fr; align-items:center; gap:5rem; padding:7rem 0; border-top:1px solid var(--border); } .privacy>img { width:100%; max-width:240px; justify-self:center; } .privacy div>p:last-child { max-width:520px; font-size:1.1rem; }
.closing { text-align:center; padding:7rem 1rem 9rem; } .closing img { width:130px; filter:drop-shadow(0 12px 18px rgba(160,106,0,.13)); } .closing h2 { margin-top:1.5rem; }.closing .button { margin-top:1rem; } footer { border-top:1px solid var(--border); padding:2rem 0 3rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-size:.85rem; color:var(--soft); } footer .brand { font-size:1.5rem; } footer div { display:flex; gap:1.2rem; } footer a:hover { color:var(--ink); }
.avatar-orbit { width:140px; height:140px; margin:1rem auto .3rem; border-radius:50%; background:#FFE294; position:relative; overflow:visible; } .avatar-orbit .avatar { width:164px; height:164px; object-fit:contain; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); margin:0; background:transparent; border-radius:0; } .board { grid-template-columns:repeat(4,1fr); } .sticker-cluster { position:absolute; right:1.25rem; top:1.1rem; width:170px; height:150px; } .sticker-cluster img { width:78px; height:78px; object-fit:contain; position:absolute; filter:drop-shadow(0 8px 9px rgba(160,106,0,.12)); } .sticker-cluster img:nth-child(1) { left:0; top:30px; transform:rotate(-12deg); } .sticker-cluster img:nth-child(2) { left:62px; top:0; } .sticker-cluster img:nth-child(3) { left:88px; top:60px; transform:rotate(12deg); } .mode-grid h3,.mode-grid p { max-width:52%; position:relative; } .catalog-note { margin:1.8rem 0 0; color:var(--soft); text-align:center; } .catalog-note strong { color:#A06A00; } .keep-together { white-space:nowrap; }
.modes .section-heading { max-width:840px; } .modes h2 span,.library-heading h2 span { display:block; white-space:nowrap; } .mode-grid article { min-height:320px; } .flow-label { color:#A06A00 !important; font-size:.78rem; font-weight:700; letter-spacing:.06em; margin:0 0 .35rem !important; text-transform:uppercase; } .mode-grid h3 { font-size:1.65rem; } .praise-message { width:calc(100% - 4rem); max-width:270px; margin-top:1.45rem; padding:.75rem .9rem; border-radius:14px; background:#FFF7E6; color:#7C7263; font-size:.79rem; line-height:1.5; } .task-list { width:calc(100% - 4rem); max-width:265px; padding:0; margin:1.25rem 0 0; list-style:none; } .task-list li { display:flex; align-items:center; justify-content:space-between; padding:.42rem 0; border-bottom:1px solid rgba(138,103,18,.18); color:#665c4c; font-size:.79rem; } .task-list span { color:#A06A00; font-size:.72rem; font-weight:700; } .sticker-library { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:4.5rem 0 8rem; } .library-heading { max-width:890px; } .library-heading>p:last-child { max-width:560px; color:var(--soft); font-size:1.05rem; } .library-rows { margin-top:3.2rem; display:grid; gap:1rem; } .sticker-row { display:grid; grid-template-columns:240px 1fr; gap:2rem; align-items:center; min-height:190px; padding:1.6rem 2rem; border:1px solid var(--border); border-radius:28px; background:#fff; } .sticker-row.praise-row { background:#FFF1CC; } .category-label { margin:0 0 .2rem; color:#A06A00; font-size:.8rem; font-weight:700; letter-spacing:.06em; } .sticker-row h3 { margin:.1rem 0; font-size:1.65rem; } .sticker-shelf { display:grid; grid-template-columns:repeat(8, minmax(54px, 1fr)); gap:.5rem; align-items:center; } .sticker-shelf img { width:100%; aspect-ratio:1; object-fit:contain; padding:.3rem; border-radius:14px; background:#FFFDF8; filter:drop-shadow(0 5px 7px rgba(160,106,0,.08)); }
@media (max-width: 800px) { .site-header { min-height:78px; } nav { display:none; } .header-action { font-size:.78rem; padding:.65rem .9rem; } .site-header,.hero,.intro,.steps,.modes,.privacy,.closing,footer { width:min(100% - 32px, 560px); } .hero { min-height:auto; grid-template-columns:1fr; padding:3.5rem 0 5rem; gap:2rem; } h1 { font-size:clamp(2.8rem, 12.5vw, 3.5rem); } .hero-copy>p { font-size:1.05rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:1.1rem; } .hero-visual { min-height:410px; } .hero-star { width:34%; left:0; top:1%; } .hero-certificate { width:38%; right:0; bottom:-7%; } .phone-preview { width:68%; min-height:390px; padding:1rem; top:4%; right:10%; border-width:6px; } .avatar-orbit { width:112px; height:112px; margin-top:.7rem; } .avatar-orbit .avatar { width:132px; height:132px; } .intro { padding:6rem 0; text-align:left; } .steps,.modes { padding:5.5rem 0; } .steps ol,.mode-grid { grid-template-columns:1fr; gap:1.4rem; } .steps li { display:grid; grid-template-columns:52px 1fr; gap:1rem; } .steps li h3 { margin:.2rem 0 .45rem; } .mode-grid article { min-height:220px; padding:2rem; } .privacy { grid-template-columns:1fr; gap:1rem; padding:5rem 0; } .privacy>img { width:150px; justify-self:start; } .closing { padding:5rem 0 6rem; } footer { display:grid; justify-content:start; } footer div { flex-wrap:wrap; gap:.7rem 1rem; } }
@media (max-width: 800px) { .modes h2 span,.library-heading h2 span { white-space:normal; } .mode-grid article { min-height:270px; } .mode-grid h3,.mode-grid p { max-width:58%; } .praise-message,.task-list { width:58%; } .sticker-library { width:min(100% - 32px, 560px); padding:2rem 0 5.5rem; } .library-heading>p:last-child { font-size:1rem; } .sticker-row { grid-template-columns:1fr; gap:1rem; padding:1.5rem; } .sticker-shelf { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.5rem; } .sticker-shelf img { max-width:74px; justify-self:center; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

/* 공개 법적 문서는 읽기 흐름을 우선하고, 서비스 본문과 구분된 단일 레이아웃을 사용한다. */
.legal-body { background:#FFFDF8; }
.legal-header { width:min(920px, calc(100% - 48px)); min-height:92px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.legal-service-link { display:inline-flex; align-items:center; gap:.45rem; color:var(--ink); font-size:.9rem; font-weight:700; }
.legal-main { width:min(760px, calc(100% - 48px)); margin:0 auto; padding:4.5rem 0 6rem; }
.legal-main h1 { font-size:clamp(2.6rem, 5vw, 4rem); }
.legal-main h2 { margin:0 0 .8rem; font-size:1.4rem; letter-spacing:0; }
.legal-date { margin:1rem 0 2.5rem; color:var(--soft); font-size:.92rem; }
.legal-main section { margin:0 0 1rem; padding:1.6rem 1.8rem; border:1px solid var(--border); border-radius:16px; background:#fff; }
.legal-main p { margin:.55rem 0 0; color:#514B40; }
.legal-main ul,.legal-main ol { margin:.7rem 0 0; padding-left:1.3rem; color:#514B40; }
.legal-main li + li { margin-top:.35rem; }
.legal-main section a,.legal-footer-nav a { color:#8B5A00; text-decoration:underline; text-underline-offset:3px; }
.legal-footer-nav { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:1.1rem 1.5rem; font-size:.92rem; font-weight:700; }
@media (max-width:800px) { .legal-header,.legal-main { width:min(100% - 32px, 560px); } .legal-header { min-height:76px; } .legal-header .brand { font-size:1.7rem; } .legal-service-link { font-size:.78rem; } .legal-main { padding:3rem 0 4rem; } .legal-main section { padding:1.3rem; border-radius:12px; } }