/* Oyoung Cosmetics — 공통 스타일 (헤더 · 푸터 · 슬라이드 · 문의 폼 보조)
   페이지 본문 수치는 디자인코드의 인라인 스타일을 그대로 사용합니다. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFFFFF}
img{max-width:100%}
main{display:block}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Header ───────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:30;height:72px;box-sizing:border-box;background:#FFFFFF;border-bottom:1px solid #ECEAF0;font-family:'Noto Sans KR',sans-serif;font-weight:300}
.site-header__in{max-width:1280px;height:100%;margin:0 auto;padding:0 40px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .site-logo{display:flex;align-items:center;text-decoration:none}
.site-header .site-logo img{height:28px;width:auto;display:block}
.site-header .site-nav{display:flex;align-items:center;gap:40px;font-size:12px;letter-spacing:0.16em;line-height:1;white-space:nowrap}
.site-header .site-nav a{color:#231F20;text-decoration:none;padding:12px 0 8px;border-bottom:1px solid transparent;margin-bottom:-1px}
.site-header .site-nav a[aria-current="page"]{border-bottom-color:#6B579F}
.site-header .site-nav a:focus-visible,.site-footer a:focus-visible{outline:2px solid #6B579F;outline-offset:3px}
.site-header .site-lang{color:#6E6B73;letter-spacing:0.08em}
.site-header .site-lang a{color:#6E6B73;border-bottom:0;padding:12px 2px}
.site-header .site-lang a[aria-current="true"]{color:#231F20;font-weight:500}

/* ── Footer ───────────────────────────────────────── */
.site-footer{background:#F3F2F5;font-family:'Noto Sans KR',sans-serif;font-weight:300}
.site-footer .site-footer__privacy{color:#231F20;font-weight:500;text-decoration:none}
.site-footer .site-footer__privacy:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:900px){
.site-header__in{padding:0 16px}
.site-header .site-nav{gap:16px;font-size:11px}
.wrap{padding-left:16px !important;padding-right:16px !important}
.foot{flex-direction:column !important}
}
@media (max-width:600px){
.site-header__in{gap:12px}
.site-header .site-logo img{height:22px}
.site-header .site-nav{gap:12px;font-size:10px;letter-spacing:0.08em}
}

/* ── STORY 슬라이드 ───────────────────────────────── */
.story{touch-action:pan-y;height:calc(100vh - 72px) !important}
@supports (height:100dvh){.story{height:calc(100dvh - 72px) !important}}
.story button:focus-visible,.story a:focus-visible{outline:2px solid #6B579F;outline-offset:3px}
.story button[disabled]{cursor:default !important}
@media (max-width:600px) and (orientation:portrait){
.story-bg{object-position:50% 50% !important}
}
@media (prefers-reduced-motion:reduce){
.story,.story *{transition-duration:.01ms !important;transition-delay:0s !important}
}

/* ── CONTACT ──────────────────────────────────────── */
.form-error{margin:0;padding:14px 16px;background:#FBF1F3;border:1px solid #E8C5CE;color:#8A2F45;font-size:14px;line-height:1.7}
.form-error a{color:inherit}
.btn[disabled]{opacity:.6;cursor:progress}
.done{display:flex;flex-direction:column;align-items:flex-start;gap:20px;border-top:1px solid #231F20;padding:48px 0 16px}
.done:focus{outline:none}
.done p{margin:0;font-size:18px;font-weight:400;line-height:1.7}
.done svg{display:block}
.lnk{background:none;border:none;padding:12px 0;font:inherit;font-size:13px;color:#6E6B73;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lnk:hover{color:#231F20}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
dialog.pdlg{width:min(520px,calc(100vw - 32px));box-sizing:border-box;padding:36px 32px 32px;border:0;background:#FFFFFF;color:#231F20;font-family:'Noto Sans KR',sans-serif;font-weight:300}
dialog.pdlg::backdrop{background:rgba(35,31,32,.45)}
dialog.pdlg h3{margin:0 0 20px;font-size:18px;font-weight:400}
dialog.pdlg ul{margin:0 0 28px;padding:20px 0 0;list-style:none;border-top:1px solid #231F20;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.8;color:#4A474F}
dialog.pdlg .btn{min-width:140px;height:48px;padding:0 32px;background:#6B579F;color:#FFFFFF;border:none;font:inherit;font-size:14px;font-weight:400;letter-spacing:0.06em}
@media (max-width:900px){dialog.pdlg{padding:28px 20px 24px}}

/* ── 개인정보처리방침 · 404 ─────────────────────────── */
.doc{max-width:860px;margin:0 auto;padding:96px 40px 128px;font-family:'Noto Sans KR',sans-serif;font-weight:300;color:#231F20;font-size:15px;line-height:1.9}
.doc h1{margin:0 0 48px;font-weight:400;font-size:32px;line-height:1.4;padding-bottom:28px;border-bottom:1px solid #231F20}
.doc h2{margin:48px 0 12px;font-weight:500;font-size:17px}
.doc p,.doc ul,.doc ol{margin:0 0 14px;color:#4A474F}
.doc a{color:#6B579F}
.doc table{border-collapse:collapse;width:100%;margin:0 0 14px;font-size:14px}
.doc th,.doc td{border:1px solid #ECEAF0;padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:#F6F6F8;font-weight:400}
.doc .notice{background:#F1ECF8;padding:24px 26px;color:#231F20}
.doc--center{text-align:center;padding-top:160px;padding-bottom:200px}
.doc--center h1{border:0;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:80px;line-height:1;margin-bottom:20px;padding:0}
.doc .cta{display:inline-flex;align-items:center;min-height:48px;margin-top:24px;padding:0 30px;background:#6B579F;color:#FFFFFF;text-decoration:none;font-size:13px;letter-spacing:0.12em}
@media (max-width:900px){.doc{padding:64px 16px 96px}.doc h1{font-size:26px}.doc--center h1{font-size:56px}}

/* 4번 장(핵심 성분): 화면이 작아 내용이 넘칠 때 위쪽이 잘리지 않고 처음부터 스크롤되도록 */
@media (max-width:900px){
.story [aria-label^="4 /"]{justify-content:flex-start !important}
}