/* ============================================================ 미국주부 · Mompreneur Diary — 공통 디자인 (A안 "팝 스튜디오") 2026-09-07 쓰는 법: 폰트 링크(구글 + Pretendard)는 각 페이지 에 그대로 둔다. ============================================================ */ :root{ --plum:#2E1A5E; --plum-deep:#1B1038; --cream:#FFF6E8; --cream-2:#FBEBD6; --coral:#FF6A3D; --lime:#D7F24B; --lilac:#C9B4F7; --white:#FFFFFF; --ink:#180F2E; --ink-soft:#5B4C77; --edge:#180F2E; --kr:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',system-ui,'Malgun Gothic',sans-serif; --disp:'Black Han Sans','Pretendard Variable',Pretendard,sans-serif; --en:'Archivo Black',var(--kr); --mono:'Space Mono',ui-monospace,monospace; --hand:'Gaegu',cursive; --wrap:1180px; --bd:2.5px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--kr); background:var(--cream); color:var(--ink); line-height:1.6; word-break:keep-all; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} :focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 라벨 · 버튼 ---------- */ .tag{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .pill{ display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px; border:var(--bd) solid var(--edge);font-weight:800;font-size:15px; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; } .pill .ar{display:inline-block;transition:transform .16s ease} .pill:hover .ar{transform:translate(3px,-3px)} .pill:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge)} .pill-coral{background:var(--coral);color:var(--white);box-shadow:4px 4px 0 var(--edge)} .pill-lime{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--edge)} .pill-white{background:var(--white);color:var(--ink);box-shadow:4px 4px 0 var(--edge)} .pill-plum{background:var(--plum);color:var(--cream);box-shadow:4px 4px 0 var(--edge)} .pill-ghost{background:transparent;color:var(--ink)} .pill-ghost:hover{background:var(--white)} .pill-line{ display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:15px; padding:13px 4px;border-bottom:3px solid var(--lime);transition:color .16s ease; } .pill-line .ar{display:inline-block;transition:transform .16s ease} .pill-line:hover .ar{transform:translateX(4px)} /* ---------- 네비 ---------- */ .mk-nav{position:sticky;top:0;z-index:200;background:var(--cream);border-bottom:var(--bd) solid var(--edge)} .mk-nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px} .mk-logo{display:flex;align-items:center;gap:11px;font-weight:900;font-size:19px;letter-spacing:-.02em;line-height:1.15} .mk-tile{ width:40px;height:40px;border-radius:12px;background:var(--coral);flex:none; border:var(--bd) solid var(--edge);display:grid;place-items:center; font-family:var(--en);font-size:19px;color:var(--white);box-shadow:3px 3px 0 var(--edge); } .mk-logo small{ display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em; color:var(--ink-soft);text-transform:uppercase;margin-top:2px; } .mk-menu{display:flex;align-items:center;gap:26px;font-weight:700;font-size:15px} .mk-menu a{position:relative;padding:4px 0;white-space:nowrap} .mk-menu a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--lime); border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .2s ease; } .mk-menu a:hover::after,.mk-menu a[aria-current]::after{transform:scaleX(1)} .mk-menu .lang{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em} .mk-nav-right{display:flex;align-items:center;gap:12px} .mk-burger{display:none;width:44px;height:40px;border:var(--bd) solid var(--edge);border-radius:10px;background:var(--white)} .mk-burger i{display:block;width:18px;height:2.5px;background:var(--ink);margin:3px auto;border-radius:2px} /* ---------- 마퀴 ---------- */ .marq{ background:var(--lime);border-top:var(--bd) solid var(--edge);border-bottom:var(--bd) solid var(--edge); overflow:hidden;padding:15px 0; } .marq-track{display:flex;width:max-content;animation:mk-slide 26s linear infinite} .marq-track span{ font-family:var(--en);font-size:16px;letter-spacing:.06em;padding:0 28px;color:var(--ink); display:flex;align-items:center;gap:28px;white-space:nowrap; } .marq-track span::after{content:"\2731";color:var(--coral);font-size:19px} @keyframes mk-slide{to{transform:translateX(-50%)}} /* ---------- 섹션 ---------- */ .sec{padding:78px 0} .sec-tight{padding-top:0} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px} .sec-head .tag{color:var(--ink-soft)} h1,h2,h3{text-wrap:balance} .h-disp{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1.15} h2.sec-title{font-family:var(--disp);font-weight:400;font-size:clamp(29px,3.6vw,42px);line-height:1.15;margin-top:8px;letter-spacing:-.01em} .sec-sub{color:var(--ink-soft);font-size:15px;font-weight:500;max-width:46ch} /* ---------- 페이지 헤더 (홈 이외 페이지) ---------- */ .page-head{padding:56px 0 40px;border-bottom:var(--bd) solid var(--edge)} .page-head h1{font-family:var(--disp);font-weight:400;font-size:clamp(32px,4.6vw,54px);line-height:1.12;margin-top:14px;letter-spacing:-.02em} .page-head .lead{margin-top:16px;font-size:16.5px;line-height:1.8;color:var(--ink-soft);font-weight:500;max-width:52ch} .page-head .tag{color:var(--coral)} /* ---------- 3갈래 카드 ---------- */ .picks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pick{ border:var(--bd) solid var(--edge);border-radius:24px;padding:26px 24px 22px; box-shadow:5px 5px 0 var(--edge);position:relative;overflow:hidden;min-height:224px; display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease; } .pick:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--edge)} .pick-1{background:var(--lilac)} .pick-2{background:var(--coral);color:var(--white)} .pick-3{background:var(--lime)} .pick .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;font-weight:700;opacity:.75} .pick h3{font-family:var(--disp);font-weight:400;font-size:25px;margin-top:auto;line-height:1.25} .pick p{font-size:13.5px;font-weight:600;margin-top:8px;opacity:.85} .pick .arw{ position:absolute;right:22px;top:22px;width:34px;height:34px;border-radius:50%; border:var(--bd) solid currentColor;display:grid;place-items:center;font-size:15px; transition:transform .18s ease; } .pick:hover .arw{transform:translate(3px,-3px)} /* ---------- 영상 ---------- */ .vids{background:var(--plum-deep);border-top:var(--bd) solid var(--edge);border-bottom:var(--bd) solid var(--edge);color:var(--cream)} .vids h2.sec-title{color:var(--cream)} .vids .tag{color:var(--lime)} .vids .sec-sub{color:#A897CC} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vcard{ background:var(--cream);border:var(--bd) solid var(--edge);border-radius:20px;overflow:hidden; box-shadow:6px 6px 0 var(--lime);display:flex;flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; } .vcard:nth-child(2){box-shadow:6px 6px 0 var(--coral)} .vcard:nth-child(3){box-shadow:6px 6px 0 var(--lilac)} .vcard:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--lime)} .vcard:nth-child(2):hover{box-shadow:10px 10px 0 var(--coral)} .vcard:nth-child(3):hover{box-shadow:10px 10px 0 var(--lilac)} .vthumb{position:relative;aspect-ratio:16/9;background:#241640;border-bottom:var(--bd) solid var(--edge)} .vthumb img{width:100%;height:100%;object-fit:cover} .vplay{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%; background:var(--coral);border:var(--bd) solid var(--edge);display:grid;place-items:center; transition:transform .18s ease; } .vplay::after{content:"";border-left:16px solid var(--white);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px} .vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.1)} .vbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1} .vbody .vt{font-weight:800;font-size:14.5px;line-height:1.5;color:var(--ink)} .vbody .vm{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-top:auto} /* ---------- 글 목록 (한 줄형) ---------- */ .blist{border-top:var(--bd) solid var(--edge)} .brow{ display:grid;grid-template-columns:118px minmax(0,1fr) auto auto;gap:24px;align-items:center; padding:22px 14px;border-bottom:var(--bd) solid var(--edge); transition:background .16s ease, padding .16s ease; } .brow:hover{background:var(--white);padding-left:22px} .btag{ justify-self:start;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em; padding:6px 11px;border:2px solid var(--edge);border-radius:999px;background:var(--lime);white-space:nowrap; } .brow:nth-child(2n) .btag{background:var(--lilac)} .brow:nth-child(3n) .btag{background:var(--cream-2)} .brow h3{font-size:18px;font-weight:800;line-height:1.45} .brow .bd{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap} .brow .go{ width:36px;height:36px;border-radius:50%;border:var(--bd) solid var(--edge);display:grid;place-items:center; background:var(--white);transition:transform .18s ease,background .18s ease,color .18s ease; } .brow:hover .go{background:var(--coral);color:var(--white);transform:translate(3px,-3px)} /* ---------- 글 목록 (카드형 · /blog/) ---------- */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .post{ background:var(--white);border:var(--bd) solid var(--edge);border-radius:22px;overflow:hidden; box-shadow:6px 6px 0 var(--lilac);display:flex;flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; } .post:nth-child(3n+2){box-shadow:6px 6px 0 var(--lime)} .post:nth-child(3n){box-shadow:6px 6px 0 var(--coral)} .post:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--lilac)} .post:nth-child(3n+2):hover{box-shadow:10px 10px 0 var(--lime)} .post:nth-child(3n):hover{box-shadow:10px 10px 0 var(--coral)} .post .th{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--bd) solid var(--edge);background:var(--cream-2)} .p-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1} .p-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .p-tag{ font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em; padding:5px 10px;border:2px solid var(--edge);border-radius:999px;background:var(--lime); } .p-date{font-family:var(--mono);font-size:11px;color:var(--ink-soft)} .post h2{font-size:18px;font-weight:800;line-height:1.45} .post p{font-size:13.5px;color:var(--ink-soft);font-weight:500;line-height:1.7} .post .more{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;margin-top:auto;color:var(--coral)} /* ---------- 도구 ---------- */ .tools-wrap{background:var(--cream-2);border-top:var(--bd) solid var(--edge);border-bottom:var(--bd) solid var(--edge)} .tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .tab{ padding:10px 17px;border:var(--bd) solid var(--edge);border-radius:999px;background:var(--white); font-weight:800;font-size:13.5px;transition:transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease; } .tab:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--edge)} .tab.active,.tab[aria-selected="true"]{background:var(--plum);color:var(--cream);box-shadow:3px 3px 0 var(--edge)} .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .tool{ background:var(--white);border:var(--bd) solid var(--edge);border-radius:18px;padding:18px 18px 16px; display:flex;flex-direction:column;gap:5px;transition:transform .16s ease, box-shadow .16s ease; } .tool:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--edge)} .tool .tl{ width:34px;height:34px;border-radius:11px;background:var(--lime);border:var(--bd) solid var(--edge); display:grid;place-items:center;font-family:var(--en);font-size:15px;margin-bottom:6px; } .tool:nth-child(3n+2) .tl{background:var(--lilac)} .tool:nth-child(3n) .tl{background:var(--coral);color:var(--white)} .tool h5{font-size:15px;font-weight:800} .tool p{font-size:12.5px;color:var(--ink-soft);font-weight:600} .tool .go{margin-top:8px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--coral)} .tab-panel{display:none} .tab-panel.active{display:block} .disc{margin-top:22px;font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.75} .disc a{border-bottom:2px solid var(--coral);font-weight:800} /* ---------- CTA 패널 ---------- */ .cta-panel{ background:var(--coral);border:var(--bd) solid var(--edge);border-radius:34px;box-shadow:8px 8px 0 var(--edge); padding:52px 48px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;color:var(--white); } .cta-panel h2{font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.18;color:var(--white)} .cta-panel .tag{color:#FFE0D3} .cta-panel>div>p{margin-top:14px;font-size:15.5px;line-height:1.75;color:#FFE9E1;max-width:42ch;font-weight:600} .cta-note{ background:var(--white);color:var(--ink);border:var(--bd) solid var(--edge);border-radius:22px;padding:22px 24px; box-shadow:5px 5px 0 var(--plum-deep); } .cta-panel .cta-note .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft)} .cta-panel .cta-note p{color:var(--ink);font-size:13.5px;margin-top:9px;line-height:1.7;max-width:none} .cta-panel .cta-note a{color:var(--ink)} .cta-note b{background:var(--lime);padding:1px 4px;border-radius:4px} .cta-panel .pill{margin-top:26px;border-color:#0E0722} /* ---------- 문의 폼 카드 ---------- */ .form-card{ background:var(--white);border:var(--bd) solid var(--edge);border-radius:24px; box-shadow:7px 7px 0 var(--plum);padding:12px;overflow:hidden; } /* ---------- 푸터 ---------- */ .mk-ft{background:var(--plum-deep);color:#BDAADD;border-top:var(--bd) solid var(--edge);padding:52px 0 34px;margin-top:78px} .mk-ft-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid #3A2B60} .mk-ft-brand{max-width:34ch} .mk-ft-brand .mk-logo{color:var(--cream)} .mk-ft-brand p{margin-top:12px;font-size:13.5px;line-height:1.75} .mk-ft h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8E7BB8;margin-bottom:12px} .mk-ft-col a{display:block;padding:4px 0;font-size:14px;font-weight:600} .mk-ft-col a:hover{color:var(--lime)} .mk-ft-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.06em} .mk-ft-bot a:hover{color:var(--lime)} /* ---------- 본문(글) ---------- */ .mk-article{max-width:760px;margin:0 auto;padding:44px 24px 20px;font-size:17px;line-height:1.85} .mk-article h2{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.25;margin:46px 0 16px;letter-spacing:-.01em} .mk-article h3{font-size:20px;font-weight:800;margin:32px 0 12px} .mk-article p{margin:0 0 18px} .mk-article ul,.mk-article ol{margin:0 0 20px 22px} .mk-article li{margin-bottom:8px} .mk-article a{color:var(--coral);font-weight:700;border-bottom:2px solid rgba(255,106,61,.35)} .mk-article a:hover{border-bottom-color:var(--coral)} .mk-article blockquote{ border-left:5px solid var(--lime);background:var(--white);border-radius:0 14px 14px 0; padding:16px 20px;margin:0 0 22px;font-weight:600; } .mk-article img{border:var(--bd) solid var(--edge);border-radius:18px;margin:0 0 22px} .mk-article table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px} .mk-article th,.mk-article td{border:2px solid var(--edge);padding:10px 12px;text-align:left} .mk-article th{background:var(--lime);font-weight:800} .mk-table-wrap{overflow-x:auto;margin:0 0 24px} /* ---------- 등장 애니메이션 ---------- */ .js .reveal{opacity:0;transform:translateY(16px)} .js .reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)} .js .reveal.d1{transition-delay:.08s} .js .reveal.d2{transition-delay:.16s} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .js .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } /* ---------- 반응형 ---------- */ @media (max-width:1000px){ .picks,.vgrid,.pgrid{grid-template-columns:1fr} .tgrid{grid-template-columns:repeat(2,1fr)} .cta-panel{grid-template-columns:1fr;padding:40px 28px} } @media (max-width:820px){ .mk-menu{ position:absolute;top:76px;left:0;right:0;background:var(--cream); border-bottom:var(--bd) solid var(--edge);flex-direction:column;align-items:stretch;gap:0; padding:8px 24px 18px;display:none; } .mk-menu.open{display:flex} .mk-menu a{padding:12px 0;border-bottom:1px solid var(--cream-2)} .mk-menu a::after{display:none} .mk-burger{display:block} .mk-nav-right .pill{display:none} } @media (max-width:760px){ .sec{padding:56px 0} .brow{grid-template-columns:1fr;gap:10px} .brow .go{display:none} .mk-article{padding:32px 20px 16px;font-size:16.5px} .mk-ft{margin-top:56px} }