:root { --ink:#171717; --paper:#f4f1e9; --line:rgba(22,22,20,.16); --accent:#e3a517; --accent-text:#875800; --accent-pale:#ffcf47; --on-accent:#171717; --night:#161615; --muted:#68645c; --serif:Georgia,'Noto Serif KR',serif; --sans:'Pretendard Variable',Pretendard,'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif; --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.055em; line-height:1.08; word-break:keep-all; overflow-wrap:normal; }
.skip-link { position:absolute; z-index:100; left:1rem; top:-5rem; background:#fff; color:#111; padding:.75rem 1rem; font-weight:700; }
.skip-link:focus { top:1rem; }
.site-shell { --ink:#171717; --paper:#f4f1e9; --line:rgba(22,22,20,.16); --accent:#e3a517; --accent-text:#875800; --accent-pale:#ffcf47; --on-accent:#171717; --night:#161615; --muted:#68645c; min-height:100vh; background:var(--paper); color:var(--ink); }
.theme-riho { --ink:#133a2c; --paper:#f5f1e6; --line:rgba(19,58,44,.17); --accent:#247459; --accent-text:#1e624b; --accent-pale:#d3c080; --on-accent:#fff; --night:#123327; --muted:#557167; }
.site-header { position:sticky; z-index:20; top:0; height:86px; max-width:1360px; margin:auto; padding:0 38px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(14px); }
.wordmark { display:flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:-.04em; font-size:1.06rem; }
.wordmark-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--on-accent); background:var(--accent); font-family:var(--serif); }
.site-header nav { display:flex; gap:2rem; font-size:.83rem; font-weight:700; }
.site-header nav a { opacity:.72; }
.site-header nav a:hover { opacity:1; }
.header-call { border:1px solid var(--ink); padding:.52rem .85rem; border-radius:999px; font-size:.77rem; font-weight:700; }
.hero { max-width:1360px; min-height:670px; margin:auto; padding:80px 38px 68px; display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; }
.hero-copy,.hero-visual { min-width:0; }
.eyebrow { margin-bottom:18px; font:700 .67rem/1.4 var(--mono); letter-spacing:.1em; color:var(--accent-text); }
.hero h1 { margin-bottom:26px; max-width:640px; font-size:clamp(3rem,4.5vw,4.45rem); font-weight:800; }
.hero h1 br:last-child { display:none; }
.hero-description { max-width:440px; color:var(--muted); font-size:1.04rem; line-height:1.9; }
.hero-actions { display:flex; gap:26px; align-items:center; margin-top:35px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:2.2rem; min-height:54px; padding:0 1.2rem 0 1.45rem; font-weight:800; font-size:.88rem; transition:transform .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--accent); color:var(--on-accent); }
.button span { font-size:1.2rem; }
.text-link { font-size:.86rem; font-weight:800; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.availability { margin-top:72px; font-size:.73rem; font-weight:700; color:var(--muted); }
.availability span { color:var(--accent); font-size:.55rem; vertical-align:middle; }
.hero-visual { position:relative; align-self:stretch; min-height:460px; }
.hero-image-frame { height:100%; min-height:475px; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:28px; background:linear-gradient(145deg,#36332e,#171715); box-shadow:0 26px 65px rgba(11,10,7,.24); }
.theme-riho .hero-image-frame { background:linear-gradient(145deg,#47765f,#16372b); }
.hero-image-frame img { object-position:center; }
.hero-index { position:absolute; bottom:18px; right:18px; margin:0; padding:8px 11px; background:var(--paper); color:var(--ink); font:500 .62rem var(--mono); letter-spacing:.08em; }
.hero-index span { opacity:.6; }
.section-pad { max-width:1360px; margin:auto; padding:110px 38px; }
.intro { border-top:1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.intro h2,.section-heading h2,.principles h2,.process h2,.guides h2,.faq h2 { margin:0; font-size:clamp(2.3rem,4vw,4rem); font-weight:700; }
.intro-grid > p { max-width:440px; margin:auto 0 0; color:var(--muted); font-size:1.08rem; line-height:1.9; }
.services { color:#f8f5ed; background:var(--night); max-width:none; padding-left:max(38px, calc((100vw - 1284px)/2)); padding-right:max(38px, calc((100vw - 1284px)/2)); }
.services .section-heading { max-width:1284px; margin:auto; }
.services .section-heading p,.services .eyebrow { color:#c8c4b9; }
.section-heading { display:flex; justify-content:space-between; gap:3rem; align-items:end; margin-bottom:56px; }
.section-heading > p { margin:0; max-width:310px; color:var(--muted); font-size:.92rem; }
.service-grid { max-width:1284px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid rgba(255,255,255,.18); }
.service-card { min-height:250px; padding:28px 26px 23px; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; }
.service-card > span { font:500 .68rem var(--mono); color:var(--accent-pale); }
.service-card h3 { margin:29px 0 10px; font-size:1.45rem; }
.service-card p { color:#c8c4b9; font-size:.84rem; line-height:1.75; }
.service-card a { margin-top:auto; padding-top:14px; font-size:.75rem; font-weight:700; color:var(--accent-pale); }
.service-card a span { margin-left:.35rem; }
.spaces { padding-bottom:120px; }
.space-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.space-grid article { min-height:245px; padding:25px 25px 20px 0; margin-right:24px; border-bottom:1px solid var(--line); }
.space-grid span,.process-list span { font:600 .68rem var(--mono); color:var(--accent-text); }
.space-grid h3 { margin:46px 0 10px; font-size:1.35rem; }
.space-grid p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.75; }
.principles { max-width:none; padding:0; display:grid; grid-template-columns:1fr 1fr; background:#e7e2d5; }
.theme-riho .principles { background:#e1e4d7; }
.principle-visual { min-height:620px; padding:54px; position:relative; color:var(--paper); background:var(--accent); overflow:hidden; }
.principle-visual span { font:700 .68rem var(--mono); letter-spacing:.12em; color:var(--on-accent); }
.principle-visual b { position:absolute; right:-.07em; bottom:-.1em; font-size:clamp(12rem,21vw,23rem); line-height:.72; letter-spacing:-.15em; color:rgba(0,0,0,.13); }
.principles > div:last-child { padding:100px clamp(38px,9vw,140px) 80px 75px; }
.principles ol { list-style:none; padding:25px 0 0; margin:32px 0 0; border-top:1px solid var(--line); }
.principles li { display:grid; grid-template-columns:150px 1fr; gap:1rem; padding:19px 0; border-bottom:1px solid var(--line); font-size:.83rem; }
.principles li span { color:var(--muted); }
.process { text-align:center; }
.process h2 { margin-bottom:62px; }
.process-list { display:grid; grid-template-columns:repeat(4,1fr); text-align:left; border-top:1px solid var(--line); }
.process-list article { padding:24px 22px 0 0; margin-right:22px; }
.process-list h3 { margin:30px 0 10px; font-size:1.3rem; }
.process-list p { color:var(--muted); font-size:.83rem; }
.guides { max-width:none; background:#eeeadf; padding-left:max(38px, calc((100vw - 1284px)/2)); padding-right:max(38px, calc((100vw - 1284px)/2)); }
.theme-riho .guides { background:#e8e8d9; }
.guides .section-heading,.guide-grid { max-width:1284px; margin-left:auto; margin-right:auto; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.guide-grid a { position:relative; min-height:255px; padding:25px; background:var(--paper); transition:transform .2s ease,background .2s ease; }
.guide-grid a:hover { transform:translateY(-4px); background:#fff; }
.guide-grid a > span:first-child { color:var(--accent-text); font:700 .65rem var(--mono); }
.guide-grid h3 { max-width:240px; margin-top:76px; font-size:1.42rem; }
.guide-grid .arrow { position:absolute; right:23px; bottom:20px; font-size:1.25rem; }
.faq { max-width:920px; }
.faq h2 { margin-bottom:42px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:25px 35px 25px 0; font-weight:800; font-size:1rem; position:relative; }
summary::-webkit-details-marker { display:none; } summary::after { content:'+'; position:absolute; right:3px; color:var(--accent); font-size:1.4rem; font-weight:400; } details[open] summary::after { content:'–'; }
details p { max-width:700px; padding-bottom:25px; margin:0; color:var(--muted); font-size:.9rem; }
.final-cta { padding:125px 30px; text-align:center; background:var(--night); color:#fff; }
.final-cta .eyebrow { color:var(--accent-pale); }
.final-cta h2 { margin-bottom:22px; font-size:clamp(2.7rem,5vw,5rem); }
.final-cta > p:not(.eyebrow) { color:#cbc7bc; margin-bottom:35px; }
.final-cta .button { background:var(--accent); }
.mobile-cta { display:none; }
.site-footer { max-width:1360px; margin:auto; padding:28px 38px; display:flex; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }
.site-footer strong { color:var(--ink); }.site-footer small { font-size:inherit; }
.brand-selector { min-height:calc(100vh - 91px); max-width:1360px; padding:100px 38px; margin:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:6rem; align-items:center; }
.brand-selector h1,.guide-document h1 { font-size:clamp(3rem,5.5vw,5.6rem); margin-bottom:25px; }.brand-selector > div > p:not(.eyebrow) { max-width:390px; color:var(--muted); }
.brand-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.brand-choice { min-height:360px; padding:30px; color:#fff; display:flex; flex-direction:column; transition:transform .2s ease; }.brand-choice:hover { transform:translateY(-5px); }.choice-tiger { background:linear-gradient(145deg,#171717,#786021); }.choice-riho { background:linear-gradient(145deg,#123428,#4f785b); }.brand-choice > span { font:500 .68rem 'DM Mono',monospace; opacity:.7; }.brand-choice h2 { margin:70px 0 12px; font-size:2.2rem; }.brand-choice p { font-size:.83rem; opacity:.8; }.brand-choice b { margin-top:auto; font-size:.76rem; }
.guide-document { max-width:1040px; margin:auto; padding:110px 38px; }.guide-document .lead { max-width:680px; color:var(--muted); font-size:1.05rem; line-height:1.9; }.guide-hub-section,.publishing-rules { scroll-margin-top:110px; padding:86px 0 18px; border-top:1px solid var(--line); }.guide-hub-section:first-of-type { margin-top:78px; }.guide-hub-section h2,.publishing-rules h2 { margin:0 0 30px; font-size:clamp(2rem,4vw,3.5rem); }.guide-hub-section > p:last-child { color:var(--muted); }.guide-pill-list { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }.guide-pill-list span { padding:10px 14px; border:1px solid var(--line); border-radius:999px; font-size:.82rem; font-weight:700; }.guide-list { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }.guide-list article { min-height:165px; padding:26px 28px 24px 0; margin-right:28px; border-bottom:1px solid var(--line); }.guide-list h3 { margin-bottom:12px; font-size:1.2rem; }.guide-list p { margin:0; color:var(--muted); font-size:.86rem; }.rule-list { margin:30px 0 45px; border-top:1px solid var(--line); }.rule-list article { display:grid; grid-template-columns:180px 1fr; gap:2rem; padding:28px 0; border-bottom:1px solid var(--line); }.rule-list h3 { margin:0; font-size:1rem; }.rule-list p { color:var(--muted); margin:0; }
@media (max-width:760px) { body { padding-bottom:58px; }.site-header { height:68px; padding:0 20px; }.site-header nav,.header-call { display:none; }.hero { min-height:0; padding:58px 20px 56px; grid-template-columns:minmax(0,1fr); gap:38px; }.hero h1 { font-size:clamp(2.35rem,10.8vw,3rem); overflow-wrap:anywhere; }.hero-description { font-size:.95rem; }.hero-actions { flex-wrap:wrap; margin-top:29px; }.availability { margin-top:43px; }.hero-visual { min-height:330px; }.hero-image-frame { min-height:330px; }.section-pad { padding:76px 20px; }.intro-grid,.principles { grid-template-columns:1fr; gap:28px; }.section-heading { display:block; margin-bottom:38px; }.section-heading > p { margin-top:22px; }.services { padding:76px 20px; }.service-grid { grid-template-columns:1fr 1fr; }.service-card { min-height:222px; padding:20px 17px; }.service-card h3 { margin:23px 0 8px; font-size:1.18rem; overflow-wrap:anywhere; }.service-card p { font-size:.75rem; }.space-grid { grid-template-columns:1fr 1fr; }.space-grid article { min-height:205px; margin-right:14px; }.space-grid h3 { margin-top:32px; font-size:1.13rem; overflow-wrap:anywhere; }.principle-visual { min-height:260px; padding:29px 20px; }.principles > div:last-child { padding:67px 20px; }.principles li { grid-template-columns:1fr; gap:7px; }.process { text-align:left; }.process h2 { margin-bottom:38px; }.process-list { grid-template-columns:1fr 1fr; }.process-list article { padding:18px 12px 5px 0; margin-right:12px; }.guides { padding:76px 20px; }.guide-grid,.guide-list { grid-template-columns:1fr; }.guide-grid a { min-height:190px; }.guide-grid h3 { margin-top:45px; }.faq { padding-bottom:82px; }.final-cta { padding:86px 20px; }.mobile-cta { position:fixed; z-index:30; bottom:0; left:0; right:0; height:58px; display:grid; grid-template-columns:1fr 1fr; background:var(--night); color:#fff; }.mobile-cta a { display:grid; place-items:center; font-size:.84rem; font-weight:800; }.mobile-cta a:last-child { background:var(--accent); color:var(--on-accent); }.site-footer { padding:23px 20px 27px; display:block; }.site-footer small { display:block; margin-top:5px; }.brand-selector { min-height:auto; padding:72px 20px; display:block; }.brand-choice-grid { margin-top:48px; grid-template-columns:1fr; }.brand-choice { min-height:260px; }.brand-choice h2 { margin-top:40px; }.guide-document { padding:76px 20px; }.guide-hub-section,.publishing-rules { padding-top:62px; }.guide-list article { min-height:0; margin-right:0; }.rule-list { margin-top:30px; }.rule-list article { grid-template-columns:1fr; gap:9px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }