/* ========================================================= LABS OET CENTER — 시안 v5 v4 대비 세 가지를 고쳤습니다 ① 한 페이지 롱스크롤 → 페이지 분할 (컨셉을 챕터가 아니라 페이지로) ② 본문 15.5px → 17.5px (전체 타입 스케일 상향) ③ 단색 → 분류색 — 장식이 아니라 색인(color-coded tab) 방식 ※ 이 파일은 시안이라 4개 페이지를 한 파일에 담고 JS로 전환합니다. 실제 구축 시에는 index / oet / pte / ielts / class / why / contact 로 나뉜 진짜 별도 파일이 됩니다. ========================================================= */ :root{ --sans:"Pretendard","Pretendard Variable",-apple-system,system-ui,"Malgun Gothic",sans-serif; --serif:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang","바탕",serif; --mono:"SFMono-Regular",Consolas,"D2Coding","Liberation Mono",Menlo,monospace; --ink:#14181F; --ink-2:#4A5160; --ink-3:#79808F; --paper:#FFFFFF; --paper-2:#F7F6F3; --rule:#DCDAD3; --rule-2:#EBE9E3; --alert:#B3261E; /* ── 분류색: 의무기록의 색인 탭 논리 ── */ --c-oet:#0E5F4E; --c-oet-bg:#E6F0EB; --c-pte:#2A4C8F; --c-pte-bg:#E7ECF5; --c-ielts:#9A3B2E; --c-ielts-bg:#F6EAE6; --c-class:#655BA0; --c-class-bg:#EDEBF7; /* 브랜드 라일락의 딥 버전 */ --c-journal:#8A6D3B; --gold:#C9A961; --dark:#0E1218; --dark-rule:rgba(255,255,255,.14); --cream:#F6F3EC; --cream-ink:#2E2C26; --cream-rule:#DBD5C6; --cream-3:#96907F; --acc:var(--c-oet); --acc-bg:var(--c-oet-bg); /* 페이지별로 교체됨 */ --pad:28px; } /* 페이지별 액센트 ① 배포본(파일이 나뉜 실제 사이트) — 로 지정 ② 한 파일 시안 — :target 으로 지정. 두 방식 모두 지원합니다. */ [data-acc="oet"] {--acc:var(--c-oet); --acc-bg:var(--c-oet-bg)} [data-acc="pte"] {--acc:var(--c-pte); --acc-bg:var(--c-pte-bg)} [data-acc="ielts"] {--acc:var(--c-ielts); --acc-bg:var(--c-ielts-bg)} [data-acc="class"] {--acc:var(--c-class); --acc-bg:var(--c-class-bg)} [data-acc="journal"]{--acc:var(--c-journal);--acc-bg:#EFE9DC} [data-acc="gold"] {--acc:var(--gold); --acc-bg:#F2EEE3} body:has(#p-pte:target) {--acc:var(--c-pte); --acc-bg:var(--c-pte-bg)} body:has(#p-ielts:target) {--acc:var(--c-ielts); --acc-bg:var(--c-ielts-bg)} body:has(#p-class:target) {--acc:var(--c-class); --acc-bg:var(--c-class-bg)} body:has(#p-journal:target){--acc:var(--c-journal);--acc-bg:#EFE9DC} body:has(#p-consult:target){--acc:var(--gold); --acc-bg:#F2EEE3} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--sans);font-size:17.5px;line-height:1.85;color:var(--ink); background:var(--paper);letter-spacing:-.011em;word-break:keep-all;line-break:strict; -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} /* ── 글꼴 원칙 ────────────────────────────────── 읽는 글자(제목·서사) = 명조 Noto Serif KR 기능하는 글자(본문·숫자·표·버튼·라벨) = 고딕 Pretendard → 전부 바꾸는 게 아니라 제목만 바꿉니다. */ h1,h2,h3,h4{margin:0;line-height:1.32} h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.022em} h4{font-family:var(--sans);font-weight:700;letter-spacing:-.03em} p{margin:0} ul{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} /* 브라우저 기본 figure 여백(좌우 40px)이 도판을 안쪽으로 밀어 넣습니다 */ figure{margin:0} :focus-visible{outline:2px solid var(--acc);outline-offset:2px} .wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)} .m{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} /* ---------- 헤더 + 색인 탭 ---------- */ .hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95); backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--rule)} .hd__in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px} .brand{font-size:16px;font-weight:700;letter-spacing:.05em} .brand b{color:var(--acc)} .hd__rec{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-2)} /* ★ 헤더는 어느 페이지에서나 흰 바탕입니다. 다크·크림 페이지의 본문 글자색을 물려받으면 워드마크가 안 보이므로 헤더 안에서는 색을 고정합니다. 워드마크는 페이지마다 바뀌지 않는 브랜드 표시입니다. */ .hd .brand{color:var(--ink)} .hd .brand b{color:var(--c-oet)} /* 색인 탭 — 각 항목이 자기 색을 갖는다 */ .tabs{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:62px;z-index:39} /* 탭바가 가로로 넘칠 때 '더 있다'는 표시 (모바일) */ @media (max-width:820px){ .tabs{position:sticky;overflow:hidden} .tabs::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:40px;pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--paper) 78%)} } .tabs__in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none} .tabs__in::-webkit-scrollbar{display:none} .tab{flex:none;font-size:15px;font-weight:500;color:var(--ink-2);padding:14px 20px 12px; border-top:3px solid transparent;border-right:1px solid var(--rule-2); background:none;cursor:pointer;font-family:inherit;white-space:nowrap;letter-spacing:-.01em; transition:color .15s ease,background .15s ease} .tab:first-child{padding-left:0;border-left:0} .tab:hover{color:var(--ink)} /* 라벨 두 벌 — 넓은 화면은 긴 이름, 좁은 화면은 짧은 이름 */ .tab .t-s{display:none} .tab[aria-current="page"], body:not(:has(.page:target)) .tab[href="#p-home"], body:has(#p-home:target) .tab[href="#p-home"], body:has(#p-oet:target) .tab[href="#p-oet"], body:has(#p-pte:target) .tab[href="#p-pte"], body:has(#p-ielts:target) .tab[href="#p-ielts"], body:has(#p-class:target) .tab[href="#p-class"], body:has(#p-journal:target) .tab[href="#p-journal"], body:has(#p-consult:target) .tab[href="#p-consult"]{ color:var(--ink);font-weight:700;border-top-color:var(--tc,var(--ink));background:var(--tbg,transparent)} .tab[data-tc="oet"] {--tc:var(--c-oet); --tbg:var(--c-oet-bg)} .tab[data-tc="pte"] {--tc:var(--c-pte); --tbg:var(--c-pte-bg)} .tab[data-tc="ielts"]{--tc:var(--c-ielts);--tbg:var(--c-ielts-bg)} .tab[data-tc="class"]{--tc:var(--c-class);--tbg:var(--c-class-bg)} .tab[data-tc="journal"]{--tc:var(--c-journal);--tbg:var(--cream)} .tab[data-tc="consult"]{--tc:var(--gold);--tbg:#F2EEE3} /* ---------- 섹션 ---------- */ /* 페이지 전환도 CSS만으로 — 주소의 #해시로 동작합니다 */ /* 실제 배포본은 파일이 나뉘므로 페이지 전환 규칙이 필요 없습니다. */ .sec{padding:80px 0} .sec--alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} /* ── 홈 상단 3색 띠 — '세 개의 길'을 그대로 보여줍니다 ── */ .routebar{display:flex;height:8px} .routebar i{flex:1} .routebar i:nth-child(1){background:var(--c-oet)} .routebar i:nth-child(2){background:var(--c-pte)} .routebar i:nth-child(3){background:var(--c-ielts)} /* ── 홈 '절차' 구획도 옅은 분류색으로 ── */ .sec--tint{background:var(--acc-bg);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .sec--tint .tl__i{border-bottom-color:rgba(0,0,0,.09)} .sec--tint .tl{border-top-width:2px} /* ── 서브페이지 머리: 페이지 분류색을 크게 씁니다 ── */ .sec--head{background:var(--acc-bg);border-top:7px solid var(--acc);border-bottom:1px solid var(--rule)} .sec--head .fact{background:rgba(255,255,255,.74)} .sec--head .note{background:rgba(255,255,255,.74)} .sec--head .fields .r{border-bottom-color:rgba(0,0,0,.09)} .sec--head .duo{background:rgba(0,0,0,.09)} .sec--head .duo>div{background:rgba(255,255,255,.78)} .sec--head .steps .s{border-bottom-color:rgba(0,0,0,.09)} /* ── 사진 밴드: 가로로 얇게 잘라 문서의 도판처럼 ── */ .band{margin-top:40px;border:1px solid var(--rule);border-radius:2px;overflow:hidden;line-height:0;background:var(--paper-2)} .band img{width:100%;height:auto;display:block} .band figcaption{line-height:1.6;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:var(--ink-3);padding:10px 12px;background:var(--paper);border-top:1px solid var(--rule)} .sh{display:flex;align-items:center;gap:14px;margin-bottom:32px} .sh__no{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#fff;background:var(--acc);padding:4px 8px;border-radius:2px} .sh__lb{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} .sh__rl{flex:1;height:1px;background:var(--rule)} .h-lg{font-size:clamp(32px,5.4vw,56px);line-height:1.2;margin-bottom:20px} .h-md{font-size:clamp(24px,3.4vw,36px);line-height:1.3;margin-bottom:16px} .lead{font-size:19px;color:var(--ink-2);max-width:38em;line-height:1.85} .mb32{margin-bottom:32px} /* ---------- 버튼 ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:16.5px;font-weight:600; letter-spacing:-.015em;padding:15px 28px;border:1px solid transparent;border-radius:2px;cursor:pointer; transition:background .16s ease,color .16s ease,border-color .16s ease} .btn--acc{background:var(--acc);color:#fff} .btn--acc:hover{filter:brightness(.88)} .btn--k{background:var(--ink);color:#fff} .btn--k:hover{background:#000} .btn--o{background:transparent;color:var(--ink);border-color:var(--rule)} .btn--o:hover{border-color:var(--ink)} .btn--gold{background:transparent;color:var(--gold);border-color:var(--gold)} .btn--gold:hover{background:var(--gold);color:#0E1218} .btn--ghostd{background:transparent;color:#DDE1E7;border-color:var(--dark-rule)} .btn--ghostd:hover{border-color:#DDE1E7} /* ---------- 01 경로 도구 ---------- */ /* ★ 좌우를 0 으로 두면 .wrap 의 여백을 덮어써서 첫 화면만 화면 끝에 붙습니다 */ .hero{padding:56px var(--pad) 0} .hero__top{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:end; padding-bottom:36px;border-bottom:1px solid var(--rule)} .hero__note{font-family:var(--mono);font-size:11px;line-height:2;color:var(--ink-3); letter-spacing:.05em;border-left:2px solid var(--acc);padding-left:18px} .hero__note b{color:var(--ink-2);font-weight:400} .pick{padding:32px 0 0} .pick__row{display:grid;grid-template-columns:124px 1fr;gap:20px;align-items:start; padding:18px 0;border-bottom:1px solid var(--rule-2)} .pick__row:first-child{border-top:1px solid var(--rule-2)} .pick__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:11px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{font-family:inherit;font-size:15px;letter-spacing:-.012em;cursor:pointer;background:var(--paper); border:1px solid var(--rule);color:var(--ink-2);padding:9px 17px;border-radius:2px;transition:all .14s ease} .chip:hover{border-color:var(--ink-3);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff} .out{margin-top:36px;border:1px solid var(--acc);border-radius:2px} .out__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--acc);color:#fff;padding:11px 20px} .out__hd .m{color:rgba(255,255,255,.72)} .out__hd .st{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#fff} .out__body{padding:8px 20px 20px} .out__r{display:grid;grid-template-columns:148px 1fr;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule-2)} .out__r:last-child{border-bottom:0} .out__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .out__v{font-size:17px;line-height:1.7} .out__v strong{font-size:22px;font-weight:700;letter-spacing:-.03em} .out__v .sub{display:block;font-size:14.5px;color:var(--ink-2);margin-top:5px} .scores{display:flex;margin-top:10px;border:1px solid var(--rule);border-radius:2px;overflow:hidden;max-width:400px} .scores div{flex:1;text-align:center;padding:11px 4px;border-right:1px solid var(--rule);background:var(--acc-bg)} .scores div:last-child{border-right:0} .scores b{display:block;font-size:19px;letter-spacing:-.02em;color:var(--acc)} .scores span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:3px} .flag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--alert); border:1px solid var(--alert);padding:2px 6px;border-radius:2px;margin-left:8px;vertical-align:2px} .flag--q{color:var(--ink-3);border-color:var(--rule)} .out__ft{border-top:1px solid var(--rule);padding:16px 20px;display:flex;align-items:center; justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--paper-2)} .disc{font-family:var(--mono);font-size:10.5px;line-height:1.85;letter-spacing:.03em;color:var(--ink-3);max-width:44em} /* ---------- 기록 스트립 ---------- */ .strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)} .strip__in{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:stretch} .strip__i{padding:22px;border-right:1px solid var(--rule)} .strip__i:first-child{padding-left:0} .strip__i b{display:block;font-size:27px;letter-spacing:-.03em;line-height:1.2;color:var(--acc)} .strip__i span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);margin-top:6px;text-transform:uppercase} .strip__cert{display:flex;align-items:center;gap:14px;padding:18px 0 18px 24px} .strip__cert .badge{width:56px;height:56px;flex:none;border:1px solid var(--rule);border-radius:2px; background-image:url("/assets/img/pte-badge.png");background-repeat:no-repeat;background-size:cover} .strip__cert span{font-size:13px;line-height:1.55;color:var(--ink-2)} .strip__cert b{display:block;font-size:14.5px;color:var(--ink)} .strip__cert em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--c-pte);letter-spacing:.05em;margin-top:3px} /* ---------- 시험 카드 (분류색) ---------- */ .exams{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:2px;overflow:hidden} /* 카드 자체를 과목 색의 옅은 면으로 — 마우스를 올리면 흰 면으로 떠오릅니다 */ .ex{background:var(--ec-bg);padding:0;text-align:left;display:block;transition:background .18s ease} /* ★ span 이라 기본이 inline → 안쪽 여백이 무시되고 제목이 테두리에 붙습니다. block 으로 고정 */ .ex__bar{display:block;height:5px} .ex__in{display:block;padding:30px 28px 32px} .ex .tag{display:block} .ex:hover{background:var(--paper)} .ex .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ec)} .ex h3{font-size:23px;margin:14px 0 12px} .ex p{font-size:16px;color:var(--ink-2);line-height:1.8} .ex .go{display:inline-block;margin-top:20px;font-size:15.5px;font-weight:600;color:var(--ec)} .ex[data-ec="oet"] {--ec:var(--c-oet); --ec-bg:var(--c-oet-bg)} .ex[data-ec="pte"] {--ec:var(--c-pte); --ec-bg:var(--c-pte-bg)} .ex[data-ec="ielts"]{--ec:var(--c-ielts);--ec-bg:var(--c-ielts-bg)} .ex[data-ec] .ex__bar{background:var(--ec)} /* ---------- 팩트 · 필드 · 표 ---------- */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-top:30px} .facts--2{grid-template-columns:repeat(2,1fr)} .facts--4{grid-template-columns:repeat(4,1fr)} .fact{background:var(--paper);padding:26px 22px} .fact b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1.2;color:var(--acc)} .fact span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:8px;line-height:1.6} .fields{border-top:2px solid var(--acc)} .fields .r{display:grid;grid-template-columns:148px 1fr;gap:22px;padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline} .fields .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .fields .v{font-size:17px;line-height:1.75} .fields .v em{font-style:normal;color:var(--ink-2);font-size:15px;display:block;margin-top:4px} .tbl{width:100%;border-collapse:collapse;font-size:15.5px} .tbl th,.tbl td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.75} .tbl thead th{border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2);font-weight:600;padding-bottom:10px} .tbl th:first-child,.tbl td:first-child{padding-left:0;width:112px} .tbl td:first-child{font-weight:700;letter-spacing:-.02em;font-size:16.5px} .tbl tr[data-ec="oet"] td:first-child{color:var(--c-oet)} .tbl tr[data-ec="pte"] td:first-child{color:var(--c-pte)} .tbl tr[data-ec="ielts"] td:first-child{color:var(--c-ielts)} .note{border:1px solid var(--rule);border-left:3px solid var(--alert);background:var(--paper-2); padding:24px 26px;font-size:16px;line-height:1.9;margin-top:28px} .note .m{display:block;margin-bottom:8px;color:var(--alert)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-top:30px} .duo>div{background:var(--paper);padding:32px 30px} .duo h4{font-size:20px;margin:12px 0 12px} .duo>div>p{font-size:15.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.8} .duo ul li{position:relative;padding:6px 0 6px 17px;font-size:15px;color:var(--ink-2);line-height:1.7} .duo ul li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;background:var(--acc);border-radius:50%} .steps{border-top:2px solid var(--acc);margin-top:30px} .steps .s{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--rule);align-items:baseline} .steps .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--acc)} .steps b{font-size:17px;letter-spacing:-.02em} .steps span{color:var(--ink-2);font-size:15.5px} .tl{border-top:2px solid var(--acc)} .tl__i{display:grid;grid-template-columns:70px 1fr 140px;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:start} .tl__n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--acc);padding-top:5px} .tl__b h4{font-size:19px;margin-bottom:8px} .tl__b p{font-size:15.5px;color:var(--ink-2);line-height:1.8;max-width:40em} .tl__t{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);text-align:right;padding-top:6px} /* ---------- FAQ ---------- */ .faq{border-top:2px solid var(--acc);max-width:860px} .faq details{border-bottom:1px solid var(--rule)} .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px 1fr 22px;gap:14px; align-items:baseline;padding:22px 0;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.55} .faq summary::-webkit-details-marker{display:none} .faq summary .q{font-family:var(--mono);font-size:11.5px;color:var(--acc);letter-spacing:.08em;font-weight:400} .faq summary .ic{justify-self:end;width:12px;height:12px;position:relative;align-self:center} .faq summary .ic::before,.faq summary .ic::after{content:"";position:absolute;background:var(--acc);transition:transform .22s ease} .faq summary .ic::before{left:0;top:5.5px;width:12px;height:1.5px} .faq summary .ic::after{left:5.5px;top:0;width:1.5px;height:12px} .faq details[open] summary .ic::after{transform:scaleY(0)} .faq summary:hover{color:var(--acc)} .faq .a{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:0 0 26px} .faq .a p{font-size:16.5px;line-height:1.95;color:var(--ink-2);max-width:56ch;grid-column:2} /* ---------- 관련 글(블로그) ---------- */ .related{border-top:2px solid var(--acc);max-width:860px} .related a{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline; padding:17px 0;border-bottom:1px solid var(--rule);transition:color .15s var(--ease)} .related a:hover{color:var(--acc)} .related .t{font-size:16.5px;line-height:1.6;letter-spacing:-.015em} .related a:hover .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} .related .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap} /* ---------- 첨부자료 ---------- */ .att{border-top:2px solid var(--acc)} .att a{display:grid;grid-template-columns:56px 1fr auto;gap:22px;align-items:center; padding:26px 0;border-bottom:1px solid var(--rule);transition:background .16s ease} .att a:hover{background:var(--acc-bg)} .att .no{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--acc)} .att h4{font-size:19px;margin-bottom:6px} .att p{font-size:15.5px;color:var(--ink-2);max-width:44em;line-height:1.8} .att .go{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--acc);white-space:nowrap} /* ---------- 마무리 ---------- */ .close{border:1px solid var(--ink);border-top:5px solid var(--acc);border-radius:2px;padding:52px 44px;text-align:center} .close h2{font-size:clamp(24px,3.6vw,34px);margin-bottom:16px} .close p{color:var(--ink-2);font-size:17px;margin-bottom:30px;max-width:34em;margin-left:auto;margin-right:auto} .close .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ========================================================= 기록 페이지 — 크림 · 명조 ========================================================= */ .pg-journal{background:var(--cream);color:var(--cream-ink)} .pg-journal .sh__no{background:var(--c-journal)} .pg-journal .sh__lb{color:#7C7566} .pg-journal .sh__rl{background:var(--cream-rule)} .jr{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start} .jr h1,.jr h2{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;color:#26241E;line-height:1.4} .jr h1{font-size:clamp(28px,4.4vw,46px);margin-bottom:26px} .jr__body{font-family:var(--serif);font-size:18px;line-height:2.1;color:#474439} .jr__body p+p{margin-top:20px} .jr__body h2{font-size:clamp(21px,2.8vw,27px);margin:34px 0 14px} .jr__body strong{font-weight:600;color:#26241E} .jr__sign{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--cream-3); margin-top:30px;padding-top:16px;border-top:1px solid var(--cream-rule);text-transform:uppercase} .toc__h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--cream-3);padding-bottom:11px;border-bottom:2px solid #26241E} .toc a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline; padding:15px 0;border-bottom:1px solid var(--cream-rule);transition:color .15s ease} .toc a:hover{color:#000} .toc .t{font-family:var(--serif);font-size:16.5px;line-height:1.6;color:#3A3830} .toc .n{font-family:var(--mono);font-size:10.5px;color:var(--cream-3);letter-spacing:.06em} .toc__more{display:inline-block;margin-top:20px;font-size:15px;color:#26241E; border-bottom:1px solid var(--cream-rule);padding-bottom:3px} .toc__more:hover{border-bottom-color:#26241E} /* ========================================================= 상담 페이지 — 다크 · 명조 · 금색 ========================================================= */ .pg-consult{background:var(--dark);color:#DDE1E7} .pg-consult .sh__no{background:var(--gold);color:#0E1218} .pg-consult .sh__lb{color:#8A93A3} .pg-consult .sh__rl{background:var(--dark-rule)} .pg-consult h1,.pg-consult h2,.pg-consult h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;color:#fff} .pg-consult .lead{color:#98A0B0} .dz{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start} .dz__q{font-family:var(--serif);font-size:clamp(26px,3.8vw,40px);line-height:1.48;color:#fff;font-weight:400;margin-bottom:26px} .dz__q em{font-style:normal;color:var(--gold)} .dz__rules{border-top:1px solid var(--dark-rule)} .dz__rules .r{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--dark-rule)} .dz__rules .n{font-family:var(--mono);font-size:11.5px;color:var(--gold);letter-spacing:.08em;padding-top:6px} .dz__rules b{display:block;font-size:17px;color:#fff;font-weight:600;letter-spacing:-.02em;margin-bottom:5px} .dz__rules p{font-size:15px;color:#98A0B0;line-height:1.8} .dz__cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap} .dz__fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:#6E7686;margin-top:24px;line-height:1.9} .dz__fields{border-top:1px solid var(--dark-rule);margin-top:44px} .dz__fields .r{display:grid;grid-template-columns:148px 1fr;gap:22px;padding:16px 0;border-bottom:1px solid var(--dark-rule)} .dz__fields .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#6E7686} .dz__fields .v{font-size:16.5px;color:#DDE1E7} .dz__fields .v a{border-bottom:1px solid var(--gold);color:var(--gold)} /* ---------- 푸터 ---------- */ .ft{border-top:2px solid var(--ink);padding:48px 0 52px;font-size:15px;color:var(--ink-2);background:var(--paper)} .ft__g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px} .ft h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:600} .ft li{margin-bottom:9px} .ft button.lnk{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer} .ft a:hover,.ft button.lnk:hover{color:var(--acc)} .ft__legal{border-top:1px solid var(--rule);padding-top:22px;font-size:13px;line-height:1.9;color:var(--ink-3)} .rev{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em; border:1px solid var(--rule);padding:5px 10px;border-radius:2px;color:var(--ink-2);margin-bottom:16px} .rev b{color:var(--ink)} /* 푸터도 페이지 톤을 따라간다 (실제 구축 시엔 각 페이지가 자기 푸터를 가짐) */ body.pg-journal .ft, body:has(#p-journal:target) .ft{background:var(--cream);border-top-color:#26241E;color:#5C584C} body.pg-journal .ft__legal, body:has(#p-journal:target) .ft__legal{border-top-color:var(--cream-rule);color:var(--cream-3)} body.pg-journal .rev, body:has(#p-journal:target) .rev{border-color:var(--cream-rule);color:#5C584C} body.pg-journal .rev b, body:has(#p-journal:target) .rev b{color:#26241E} body.pg-consult .ft, body:has(#p-consult:target) .ft{background:var(--dark);border-top-color:var(--gold);color:#98A0B0} body.pg-consult .ft h4, body:has(#p-consult:target) .ft h4{color:#6E7686} body.pg-consult .ft__legal, body:has(#p-consult:target) .ft__legal{border-top-color:var(--dark-rule);color:#6E7686} body.pg-consult .ft .brand, body:has(#p-consult:target) .ft .brand{color:#fff} body.pg-consult .ft .brand b, body:has(#p-consult:target) .ft .brand b{color:var(--gold)} body.pg-consult .ft p, body:has(#p-consult:target) .ft p{color:#98A0B0} body.pg-consult .rev, body:has(#p-consult:target) .rev{border-color:var(--dark-rule);color:#98A0B0} body.pg-consult .rev b, body:has(#p-consult:target) .rev b{color:#DDE1E7} /* ---------- 반응형 ---------- */ @media (max-width:900px){ .hero__top,.dz,.jr{grid-template-columns:1fr;gap:30px;align-items:start} .hero__note{border-left:0;border-top:2px solid var(--acc);padding-left:0;padding-top:16px} .strip__in{grid-template-columns:1fr 1fr} /* 2단이 되므로 왼쪽 칸은 본문과 같은 선에 맞춘다(들여쓰기 어긋남 방지) */ .strip__i{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 18px} .strip__i:nth-child(odd){padding-left:0} .strip__i:first-child{padding-left:0} .strip__cert{grid-column:1 / -1;padding:20px 0} .exams{grid-template-columns:1fr} .tl__i{grid-template-columns:48px 1fr;gap:16px} .tl__t{grid-column:2;text-align:left;padding-top:8px} .duo{grid-template-columns:1fr} .ft__g{grid-template-columns:1fr 1fr} } @media (max-width:620px){ :root{--pad:22px} body{font-size:17px} /* 터치 영역 44px 확보 (손가락으로 누르는 화면) */ .chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px} /* ★ 탭 7개가 한 줄에 다 보이게 — 짧은 라벨 + 여백 축소 */ .tab .t-l{display:none} .tab .t-s{display:inline} .tab{padding:15px 9px 13px;font-size:14px;letter-spacing:-.03em} .tabs__in{justify-content:space-between} .tabs::after{display:none} /* 다 보이므로 '더 있음' 표시 불필요 */ /* ★ 도판은 화면 끝까지 채우고 키운다 */ .band{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad)); border-left:0;border-right:0;border-radius:0} .band img{height:200px;object-fit:cover;object-position:center} .sec{padding:56px 0} .tabs{top:58px} .hd__in{height:58px} .hd__rec{display:none} .pick__row,.out__r,.fields .r,.dz__fields .r{grid-template-columns:1fr;gap:7px} .pick__k{padding-top:0} .facts{grid-template-columns:1fr 1fr} /* 홀수 개면 마지막 칸이 혼자 남아 옆이 회색으로 비어 보입니다 → 한 줄을 다 쓰게 */ .facts > .fact:last-child:nth-child(odd){grid-column:1 / -1} .att a{grid-template-columns:1fr;gap:9px} .att .no{display:none} /* ★ 푸터: 세로로 길어지지 않게 링크를 한 줄 흐름으로 눕힌다 (칸을 나누면 3줄이 생겨 화면 한 판을 통째로 잡아먹습니다) */ .ft{padding:30px 0 32px;font-size:14px} .ft__g{display:block;margin-bottom:20px} .ft__g > div:first-child{margin-bottom:14px} /* 브랜드 설명은 탭·본문에서 이미 다 말한 내용이라 모바일에선 생략 */ .ft__g > div:first-child p{display:none} .ft__g > div:not(:first-child){display:inline} .ft__g h4{display:none} .ft__g ul{display:inline} .ft__g li{display:inline;margin:0;line-height:2.1} .ft__g li::after{content:"·";margin:0 8px;color:var(--ink-3)} .ft__g > div:last-child li:last-child::after{content:""} .ft__legal{padding-top:14px;font-size:11px;line-height:1.6;color:var(--ink-3)} .ft__legal p{margin-top:6px} .rev{margin-bottom:8px;font-size:10.5px;padding:3px 8px} .tbl th,.tbl td{padding:12px 8px;font-size:14.5px} .tbl th:first-child,.tbl td:first-child{width:80px} .close{padding:36px 24px} .faq summary{grid-template-columns:32px 1fr 18px;font-size:16.5px} .faq .a{grid-template-columns:32px 1fr} } @media (prefers-reduced-motion:reduce){*{transition:none!important}}