/* 채움컴퍼니 회사 사이트 공통 — 기준: ../../디자인기준.md (2026-09-19 AI 티 수정판) base.css 다음에 불러온다. 페이지는 아래 값만 쓴다: 색 7 / 글자 32·24·19·17·14 (PC 44·32) / 간격 8·16·24·40·64 / 둥글기 12·8 / 그림자 없음. 이 밖의 값이 필요하면 디자인기준.md 를 먼저 고친다. 머리글(.gh)은 고시원 페이지도 쓴다(그쪽은 base.css 색 변수를 그대로 받음). */ .site{ --bg:#0E0E11; --surface:#17171C; --line:rgba(255,255,255,.12); --text:#E9E7E4; --muted:#A3A099; --gold:#C9A455; --ink:#17140C; /* base.css 부품이 쓰는 나머지 변수를 위 7색으로 묶는다 */ --surface2:var(--surface); --line2:var(--line); --text2:var(--text); --gold-lt:var(--gold); --gold-dim:var(--line); } html{scroll-padding-top:72px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── 머리글 ── */ .gh{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)} .gh-in{max-width:1120px;margin:0 auto;padding:0 16px 0 24px;height:56px;display:flex;align-items:center;gap:16px} .logo{font-weight:800;font-size:19px;letter-spacing:-.03em;text-decoration:none;color:var(--text);margin-right:auto;white-space:nowrap} .logo::before{content:"";display:inline-block;width:8px;height:16px;background:var(--gold);margin-right:8px;vertical-align:-2px} .gh-nav,.gh-cta{display:none} .gh-all{font-size:14px;color:var(--muted)} .gh .gh-m{position:static;border:0;padding:0} .gh-m summary{width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;cursor:pointer} .gh-m summary::after{display:none} .gh-m summary span{display:block;width:22px;height:2px;background:var(--text)} .gh-m[open] summary span:nth-child(2){opacity:0} .gh-m[open] summary span:nth-child(1){transform:translateY(7px) rotate(45deg)} .gh-m[open] summary span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .gh-panel{position:absolute;left:0;right:0;top:56px;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 24px;display:flex;flex-direction:column;max-height:calc(100vh - 56px);overflow:auto} .gh-panel > a:not(.btn){display:block;padding:16px 0;font-size:17px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)} .gh-panel > a[aria-current]{color:var(--gold)} .gh-panel .btn{margin-top:16px} .gh-tel{font-size:14px;color:var(--muted);text-align:center;margin-top:16px} .gh-min .gh-in{height:48px} @media (min-width:1000px){ .gh-nav{display:flex;gap:8px} .gh-nav a{font-size:14px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px;border-bottom:2px solid transparent} .gh-nav a:hover,.gh-nav a[aria-current]{color:var(--text)} .gh-nav a[aria-current]{border-bottom-color:var(--gold)} .gh-cta{display:inline-block;font-size:14px;font-weight:800;color:var(--ink,#17140C);background:var(--gold);border-radius:8px;padding:8px 16px;text-decoration:none} .gh-m{display:none} } /* ── 틀 ── */ .site .wrap{max-width:1120px;padding:0 24px} .site section,.site section.sec{padding:40px 0;border-top:1px solid var(--line)} .site h1{font-size:32px;line-height:1.3;margin-bottom:16px} .site h1 em{font-style:normal;color:var(--gold)} .site h2{font-size:24px;line-height:1.35;margin-bottom:24px} .site h3{font-size:19px;line-height:1.45} .site p{margin-bottom:16px} .site .soft,.site .lead{font-size:17px;color:var(--muted)} .site .cap,.site .masknote,.site .btn-note{font-size:14px;color:var(--muted)} .site .masknote{border-left:2px solid var(--line);padding-left:16px;margin-top:24px} .site .num{font-size:14px;letter-spacing:.08em;margin-bottom:8px} .lnk{color:var(--gold);font-weight:700;text-underline-offset:4px} .crumbs{font-size:14px;color:var(--muted);padding-top:24px} .crumbs a{color:var(--muted)} @media (min-width:900px){ .site section,.site section.sec{padding:64px 0} .site h1{font-size:44px;line-height:1.25} .site h2{font-size:32px} } /* 두 칸(설명 | 실물) — PC에서만 나란히 */ .split{display:grid;gap:24px} .split > *,.me2 > *{min-width:0} /* 긴 메일 주소 등이 칸을 밀어 가로 넘침이 생기지 않게 */ .kv td{overflow-wrap:anywhere} @media (min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start} .split.wide-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} } /* ── 첫 화면 ── */ .top{padding:40px 0;border-top:0!important} .top .lead{max-width:600px} .btnrow{display:flex;flex-direction:column;gap:8px;margin-top:24px;max-width:520px} .btn2{display:block;text-align:center;text-decoration:none;font-weight:800;font-size:17px;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:16px;line-height:1.3} .btn2:hover{border-color:var(--gold)} @media (min-width:600px){ .btnrow{flex-direction:row} .btnrow > *{flex:1} } @media (min-width:900px){ .top{padding:64px 0} } /* ── 실물(캡처) 틀 ── */ .shotbox{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)} .shotbox button,.shotbox a.img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in} .shotbox img{width:100%} .shotbox .clipimg{max-height:420px;overflow:hidden} .shotbox figcaption,.shotbox .cap-in{padding:16px;font-size:14px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line)} .shotbox figcaption b{display:block;font-size:17px;color:var(--text);margin-bottom:8px} /* 휴대폰 화면 한 장(원본 폭 240 그대로, 흐려지지 않게) */ .tallshot{height:440px;overflow:hidden;background:var(--bg);padding-top:24px} .tallshot img{width:240px;margin:0 auto;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;transform:translateY(-40%)} @media (prefers-reduced-motion:no-preference){ .tallshot img{animation:tallscroll 30s ease-in-out infinite alternate} @keyframes tallscroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 416px))}} } /* ── 목록 ── */ .list{list-style:none;border-top:1px solid var(--line)} .list > li{padding:16px 0;border-bottom:1px solid var(--line)} .list > li b{display:block;font-size:17px} .list > li span{display:block;color:var(--muted);font-size:17px;margin-top:8px} .dash{list-style:none} .dash li{position:relative;padding-left:24px;margin-bottom:8px} .dash li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:2px;background:var(--gold)} .dash.no li::before{background:var(--muted)} ol.steps-plain{padding-left:24px} ol.steps-plain li{padding-left:8px;margin-bottom:16px} ol.steps-plain li::marker{color:var(--gold);font-weight:800} ol.steps-plain b{display:block} ol.steps-plain span{color:var(--muted)} /* 서비스 줄 (메인) */ .svcrows{border-top:1px solid var(--line)} .svcrow{display:grid;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none} .svcrow h3{font-size:19px} .svcrow p{color:var(--muted);margin:8px 0 0} .svcrow .go{color:var(--gold);font-weight:700} .svcrow img{border:1px solid var(--line);border-radius:8px;max-height:200px;width:auto} @media (min-width:900px){ .svcrow{grid-template-columns:240px minmax(0,1fr) 200px;align-items:start;gap:40px} .svcrow .go{grid-column:2} .split .svcrow{grid-template-columns:none;gap:8px} /* 좁은 칸(두 칸 배치) 안에서는 한 줄씩 */ .split .svcrow .go{grid-column:auto} } /* 섹션 안 작은 제목 */ .sub-h{font-size:19px;font-weight:800;margin:40px 0 16px;letter-spacing:-.02em} .sub-h:first-of-type{margin-top:24px} /* ── 표 ── */ .tbl{width:100%;border-collapse:collapse;font-size:17px} .tbl th,.tbl td{text-align:left;vertical-align:top;padding:16px 8px 16px 0;border-bottom:1px solid var(--line);line-height:1.6} .tbl thead th{font-size:14px;color:var(--muted);font-weight:700;border-top:1px solid var(--line)} .tbl tbody th{font-weight:700;padding-right:16px;white-space:nowrap} .tbl td{color:var(--muted)} .tbl td b{color:var(--text)} @media (max-width:640px){ .tbl thead{display:none} .tbl tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)} .tbl th,.tbl td{display:block;border:0;padding:0 0 8px} .tbl td[data-h]::before{content:attr(data-h);display:block;font-size:14px;color:var(--muted)} } .kv{width:100%;border-collapse:collapse;font-size:17px} .kv th,.kv td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6} .kv th{width:32%;color:var(--muted);font-weight:400;padding-right:16px} /* ── 제작 사례 카드(유일한 카드) ── */ .pfs{display:grid;gap:16px} @media (min-width:760px){ .pfs{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1080px){ .pfs{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} } .pf{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden} .pf-shot{display:block;height:240px;overflow:hidden;border-bottom:1px solid var(--line);position:relative;background:var(--bg)} .pf-shot img{width:200px;max-width:none;margin:24px auto 0;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0; transform:translateY(var(--y,-38%))} /* --y = content/portfolio.json 의 shot_y */ @media (prefers-reduced-motion:no-preference){ .pf-shot img{animation:pfscroll 26s ease-in-out infinite alternate} .pf:nth-child(2) .pf-shot img{animation-delay:-9s}.pf:nth-child(3) .pf-shot img{animation-delay:-17s} @keyframes pfscroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 216px))}} } .pf-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700} .pf-b{padding:16px 24px 24px;display:flex;flex-direction:column;flex:1} .pf-st{font-size:14px;color:var(--muted);margin-bottom:8px!important} .pf h3{margin-bottom:8px} .pf h3 span{font-size:14px;font-weight:400;color:var(--muted);margin-left:8px} .pf-p{color:var(--muted)} .pf-f{list-style:none;margin:0 0 16px;font-size:14px;color:var(--muted)} .pf-f li{display:inline} .pf-f li+li::before{content:" · "} .pf-n{font-size:14px;color:var(--gold)} .pf-go{margin-top:auto;font-weight:800;color:var(--gold);text-underline-offset:4px;word-break:break-all} /* ── 원장님 메시지·보고 캡처 모음 ── */ .msgs{columns:1;column-gap:16px} /* 휴대폰에서 2단이면 글씨가 작아 읽히지 않는다 */ @media (min-width:600px){ .msgs{columns:2} } .msgs figure{break-inside:avoid;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)} .msgs img{width:100%;cursor:zoom-in} @media (min-width:900px){ .msgs{columns:3} } .reports{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity} .reports figure{flex:0 0 auto;margin:0;scroll-snap-align:start} .reports img{height:280px;width:auto;max-width:none;border:1px solid var(--line);border-radius:12px;cursor:zoom-in} .reports figcaption{font-size:14px;color:var(--muted);margin-top:8px;max-width:240px} /* ── 노출 결과 줄 (고시원 페이지와 같은 구조를 이 기준으로) ── */ .site .rows{border:0;border-top:1px solid var(--line);border-radius:0;background:none} .site .rows li{padding:16px 0;border-top:0;border-bottom:1px solid var(--line);gap:16px} .site .rows .ch{font-size:14px;border-radius:8px;padding:0 8px;background:var(--surface);color:var(--muted)} .site .rows .k b{font-size:17px} .site .rows .k span{font-size:14px;color:var(--muted)} .site .rows .see{font-size:14px;border-radius:8px;background:none;color:var(--gold);border-color:var(--line);text-decoration:none} /* ── base.css 부품을 이 기준으로 ── */ .site .btn{border-radius:12px} .site .cmp{border-color:var(--line);border-radius:12px;max-width:720px} .site .cmp .r > *{font-size:17px} .site .cmp .h,.site .cmp .h b,.site .rs{font-size:14px} .site .cmp .h b{font-size:19px;color:var(--text)} .site .cmp .h.p2 b,.site .cmp .y,.site .cmp .tot .amt{color:var(--gold)} .site .cmp .n{color:var(--muted)} .site .cmp .tot .amt{font-size:17px} .site .incl{font-size:14px;border-radius:8px;background:none;color:var(--gold);padding:0;margin-left:8px} .site .pick{max-width:720px} .site .pick div{font-size:17px;border-radius:12px} .site details p{font-size:17px} .site .faq{max-width:820px} .site .form{border-color:var(--line);border-radius:12px;padding:24px} .site .form input[type=text],.site .form textarea{border-radius:12px;font-size:17px} .site .form textarea{width:100%;font-family:var(--font);color:var(--text);background:var(--bg);border:1px solid var(--line);padding:16px;margin-bottom:16px;min-height:96px;resize:vertical;line-height:1.6} .site .form .opt{font-weight:400;color:var(--muted);font-size:14px;margin-left:8px} .site .form fieldset{border:0;margin:0 0 16px;padding:0} .site .form legend{font-size:14px;font-weight:700;margin-bottom:8px} .site .seg span{font-size:17px;border-radius:8px} .site .seg input:checked + span{background:none} .site .privacy{font-size:14px} .site .done b{font-size:19px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips label{margin:0;cursor:pointer;font-weight:400} .chips input{position:absolute;opacity:0;width:1px;height:1px} .chips span{display:block;font-size:17px;padding:8px 16px;border:1px solid var(--line);border-radius:8px;color:var(--muted)} .chips input:checked + span{border-color:var(--gold);color:var(--gold)} .chips input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px} .site .bar{background:var(--bg);border-color:var(--line)} .site .bar a{font-size:17px;border-radius:12px} .bar .tl{flex:.7;border:1px solid var(--line2);color:var(--text);background:transparent} .site .lb{background:var(--bg)} .site .lb img{background:none;border-radius:8px} .site .lb .x{font-size:24px;border-radius:8px} .site #toast{font-size:14px;border-radius:8px} @media (min-width:900px){ .site .bar{box-shadow:none;border-radius:12px;background:var(--bg)} .site .bar a{font-size:17px} } /* 연락 수단 줄 */ .chan{list-style:none;border-top:1px solid var(--line)} .chan li{border-bottom:1px solid var(--line)} .chan a{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;text-decoration:none} .chan b{font-size:14px;color:var(--muted);font-weight:400;padding-top:2px} .chan span{font-size:19px;font-weight:800;word-break:break-all} .chan small{grid-column:2;font-size:14px;color:var(--muted);margin-top:-8px} /* 숫자 3칸 (확인된 사실만) */ .nums{display:grid;gap:16px;border-top:1px solid var(--line)} .nums div{padding:16px 0;border-bottom:1px solid var(--line)} .nums b{display:block;font-size:32px;font-weight:800;color:var(--gold);line-height:1.3} .nums span{display:block;font-size:14px;color:var(--muted);margin-top:8px} @media (min-width:700px){ .nums{grid-template-columns:repeat(3,1fr);gap:40px} } /* 방문자 유형 분기 */ .forks{display:grid;gap:16px} @media (min-width:900px){ .forks{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} } .fork{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;text-decoration:none} .fork:hover{border-color:var(--gold)} .fork h3{margin-bottom:8px} .fork p{color:var(--muted);flex:1} .fork .go{color:var(--gold);font-weight:800;margin-top:16px} /* 대표 */ .me2{display:grid;gap:24px} .me2 img{width:100%;max-width:360px;border-radius:12px} @media (min-width:800px){ .me2{grid-template-columns:320px 1fr;gap:64px;align-items:start} } .facts{list-style:none;margin:16px 0 24px} .facts li{font-size:19px;font-weight:700;padding:8px 0;border-bottom:1px solid var(--line)} .facts li span{display:block;font-size:14px;font-weight:400;color:var(--muted)} /* 바닥글 */ .ft{border-top:1px solid var(--line);padding:40px 0 64px} .ft p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:16px} .ft-name b{color:var(--text)} .ft a{color:var(--muted)} .ft-links a{color:var(--text);text-decoration:none;font-weight:700} /* 마지막 안내(메인만) / 페이지 끝 한 줄 */ .endline{font-size:17px} .endline a{color:var(--gold);font-weight:700}