/* ========================================================================= ONE CORPORATION 공유 스타일 (원마블 · 원하우젠) 디자인: 스톤 갤러리 — 따뜻한 종이 바탕 · 괘선으로 구획 · 자재가 주인공 정본: 디자인상담/디자인_결정서.md · 시안: 디자인상담/canvas/ ※ 웹폰트는 각 HTML 의 Google Fonts 로 로딩한다 (필수). 상자·그림자·둥근모서리 사용 안 함. 포인트 색은 스톤 그레이 하나. ========================================================================= */ :root{ /* 스톤 갤러리 팔레트 */ --paper:#FAF8F4; --paper-2:#F0EBE3; --ink:#16130F; --ink-70:#4A443B; --ink-soft:#6E6659; /* --stone = 작은 라벨·캡션용 (종이 위 대비 4.5:1 이상 확보) --stone-light = 24px 이상 큰 장식 숫자 전용 (작은 글자에 쓰지 말 것) */ --stone:#736A5E; --stone-light:#9A9083; --line:#E0D9CD; --dark:#13100C; --dark-fg:#EFEAE2; --dark-line:rgba(239,234,226,.18); --dark-soft:rgba(239,234,226,.78); --dark-dim:rgba(239,234,226,.66); /* 구버전 별칭 (HTML 인라인 style에서 참조 중 — 유지) */ --bg:#FAF8F4; --bg-alt:#F0EBE3; --badge:#16130F; --maxw:1440px; --serif:"Noto Serif KR","Nanum Myeongjo",Georgia,serif; --disp:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper); line-height:1.85;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden; /* 한글은 기본값이면 단어 한가운데서 잘린다("돌을 그대 / 로 놓는 일"). keep-all로 어절 단위로만 끊고, 긴 영문·URL만 예외로 쪼갠다. (2026-08-24) */ word-break:keep-all;overflow-wrap:break-word} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-weight:400;line-height:1.3;text-wrap:balance} p{text-wrap:pretty} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} .serif{font-family:var(--serif)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 88px} .section{padding:104px 0} .note{margin-top:40px;color:var(--ink-70);font-size:.88rem;line-height:1.8;letter-spacing:.01em;max-width:52ch} /* ── 섹션 오프너: 전폭 괘선 + 왼쪽 정렬, 설명은 오른쪽 끝 ───────────── */ .sec-title{display:grid;grid-template-columns:auto auto 1fr;column-gap:30px; align-items:baseline;border-top:1px solid var(--ink);padding-top:22px;margin-bottom:56px;text-align:left} .sec-title .kicker{font-family:var(--disp);font-size:.94rem;letter-spacing:.2em; text-transform:uppercase;color:var(--stone);display:block;margin:0;font-weight:400} .sec-title h2{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.38rem); font-weight:400;letter-spacing:-.035em;color:var(--ink)} .sec-title p{justify-self:end;text-align:right;color:var(--ink-soft); font-size:.98rem;line-height:1.8;max-width:38ch;margin:0} /* ── 버튼 · 링크 ─────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:11px;height:52px;padding:0 30px; font-size:.86rem;letter-spacing:.12em;font-weight:500;border:1px solid var(--ink); background:transparent;color:var(--ink);cursor:pointer;font-family:var(--sans); transition:background .2s ease,color .2s ease,border-color .2s ease,transform .12s var(--ease)} .btn:active{transform:scale(.985)} .btn-fill{background:var(--ink);color:var(--paper)} .btn-light{border-color:var(--dark-fg);color:var(--dark-fg)} @media(hover:hover) and (pointer:fine){ .btn:hover{background:var(--ink);color:var(--paper)} .btn-fill:hover{background:#000} .btn-light:hover{background:var(--dark-fg);color:var(--dark)} } .tlink{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;letter-spacing:.08em; border-bottom:1px solid var(--ink);padding-bottom:4px;transition:border-color .2s ease,color .2s ease} .tlink:hover{color:var(--stone);border-color:var(--stone)} .arw{flex:none} /* ── 본문 바로가기 (키보드 사용자용, 평소엔 숨김) ─────────────────── */ .skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--paper); padding:13px 22px;font-size:.8rem;letter-spacing:.06em;transition:top .2s var(--ease)} .skip:focus{top:16px;color:var(--paper)} /* ── 헤더 ────────────────────────────────────────────────────────── */ header{position:fixed;top:0;left:0;right:0;z-index:100;padding:0; background:rgba(250,248,244,.93);backdrop-filter:blur(10px); border-bottom:1px solid var(--line);transition:background .3s ease} .hbar{display:flex;align-items:center;justify-content:space-between;height:76px} /* 한글 워드마크는 넓은 자간이 어울리지 않는다 — 라틴 보조표기만 넓게 */ .logo{font-family:var(--serif);font-size:1.24rem;letter-spacing:.02em; color:var(--ink);line-height:1.15;font-weight:500} .logo small{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.26em; margin-top:7px;color:var(--stone);font-weight:500;text-transform:uppercase} .nav{display:flex;align-items:center;gap:34px} .nav>li{position:relative;list-style:none} .nav>li>a{font-size:.84rem;letter-spacing:.09em;color:var(--ink-70);padding:26px 0; display:inline-flex;align-items:center;gap:6px;cursor:pointer; border-bottom:1px solid transparent;transition:color .2s ease} .nav>li>a:hover{color:var(--ink)} .nav .caret{font-size:.54rem;color:var(--stone)} .nav .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px); background:var(--paper);border:1px solid var(--line);min-width:186px;padding:6px 0; opacity:0;visibility:hidden;transition:.2s var(--ease);pointer-events:none} .nav>li:hover .drop,.nav>li.open .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto} .nav .drop a{display:block;padding:11px 22px;font-size:.8rem;letter-spacing:.02em;color:var(--ink-70);white-space:nowrap} .nav .drop a:hover{background:var(--paper-2);color:var(--ink)} .nav .ext{font-size:.76rem;letter-spacing:.2em;color:var(--stone);text-transform:uppercase; border-left:1px solid var(--line);padding:0 0 0 28px !important;border-bottom:none} .hamburger{display:none;background:none;border:none;cursor:pointer; width:44px;height:44px;align-items:center;justify-content:flex-end;padding:0} .hamburger span{display:block;width:22px;height:1px;background:var(--ink);transition:.3s var(--ease)} .hamburger span:nth-child(2){margin:6px 0} .hamburger span:nth-child(3){display:none} /* ── 히어로 ──────────────────────────────────────────────────────── */ .hero{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center; text-align:center;color:var(--dark-fg);overflow:hidden;background:var(--dark);padding-top:76px} .hero img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.86} .hero .overlay{position:absolute;inset:0;z-index:1;background: radial-gradient(ellipse 62% 52% at 50% 48%,rgba(19,16,12,.72),rgba(19,16,12,0) 78%), linear-gradient(180deg,rgba(19,16,12,.5) 0%,rgba(19,16,12,.18) 34%,rgba(19,16,12,.62) 100%)} .hero.noimg{background:var(--dark)} .hero .inner{position:relative;z-index:2;padding:0 24px} .hero .ey{font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dark-dim); margin-bottom:22px;font-weight:500} .hero h1{font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:400; letter-spacing:-.035em;line-height:1.3} .hero .sub{font-size:.92rem;letter-spacing:.1em;margin-top:22px;color:var(--dark-soft)} .hero .cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2; font-size:.76rem;letter-spacing:.3em;color:var(--dark-dim)} .hero .cue::after{content:"";display:block;width:1px;height:32px;background:var(--dark-line);margin:9px auto 0} /* 좌 카피 / 우 자재 — 원마블 히어로 */ .hero.split{display:grid;grid-template-columns:680px 1fr;text-align:left;color:var(--ink); background:var(--paper);min-height:100dvh;align-items:stretch;padding-top:76px} .hero.split .overlay,.hero.split .cue{display:none} .hero.split .inner{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center; padding:0 64px 0 88px;max-width:none} .hero.split img.bgimg{position:relative;grid-column:2;grid-row:1;inset:auto;opacity:1;height:100%} .hero.split .ey{color:var(--stone);letter-spacing:.26em} .hero.split h1{font-size:clamp(2rem,3.9vw,3.35rem)} .hero.split .lede{margin-top:28px;padding-top:24px;border-top:1px solid var(--line); font-size:.98rem;line-height:1.8;color:var(--ink-70);max-width:38ch} .hero.split .acts{margin-top:36px;display:flex;align-items:center;gap:26px;flex-wrap:wrap} .hero-plate{position:absolute;right:0;bottom:0;z-index:3;background:var(--paper); padding:15px 26px 13px;display:flex;align-items:baseline;gap:13px} .hero-plate b{font-size:.84rem;font-weight:500} .hero-plate em{font-style:normal;font-family:var(--disp);font-size:.88rem;color:var(--ink-soft);letter-spacing:.05em} /* ── 수치 밴드 ───────────────────────────────────────────────────── */ .statband{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:32px 30px 30px;border-left:1px solid var(--line)} .stat:first-child{border-left:none;padding-left:0} .stat .n{font-family:var(--disp);font-size:2.7rem;font-weight:300;line-height:1;font-variant-numeric:lining-nums tabular-nums} .stat .l{margin-top:12px;font-size:.84rem;color:var(--ink-soft)} .stat .say{font-family:var(--serif);font-size:1rem;line-height:1.75;letter-spacing:-.02em;color:var(--ink-70)} /* ── 자재 인덱스 (card = 검체) ───────────────────────────────────── */ .subtabs{display:flex;gap:26px;margin-bottom:40px;flex-wrap:wrap; border-bottom:1px solid var(--line);padding-bottom:0} .subtabs button{padding:0 0 13px;font-size:.8rem;letter-spacing:.04em;border:none; background:none;color:var(--stone);cursor:pointer;font-family:var(--sans); border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .2s ease,border-color .2s ease} .subtabs button.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:500} .subtabs button:hover{color:var(--ink)} .pane{display:none}.pane.active{display:block} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 32px} .grid.cols3{grid-template-columns:repeat(3,1fr)} .card{cursor:pointer} .card .imgbox{position:relative;aspect-ratio:1/1.18;overflow:hidden;background:#ECE7DF} .card.wide .imgbox{aspect-ratio:4/3} .card .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .card.noimg .imgbox{background:var(--paper-2)} .card .badge{position:absolute;top:0;left:0;background:var(--paper);color:var(--ink); padding:7px 13px;font-size:.72rem;letter-spacing:.14em;font-weight:500; width:auto;height:auto;border-radius:0;display:block} @media(hover:hover) and (pointer:fine){.card:hover .imgbox img{transform:scale(1.045)}} .card .cap{text-align:left;padding:12px 0 0;margin-top:14px;border-top:1px solid var(--ink); display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .card .cap b{font-weight:500;font-size:.96rem;letter-spacing:-.015em;display:inline} .card .cap span{margin-left:auto;font-family:var(--disp);font-size:.9rem;letter-spacing:.05em; text-transform:none;color:var(--ink-soft);margin-top:0;display:inline} .card .cap span.space-desc{flex-basis:100%;margin-left:0;font-family:var(--sans); font-size:.86rem;color:var(--stone);margin-top:6px} /* 필터 바 */ .filters{display:flex;gap:22px;margin-bottom:34px;flex-wrap:wrap;align-items:center} .filters button{padding:0 0 6px;font-size:.84rem;letter-spacing:.03em;border:none; border-bottom:1px solid transparent;background:none;color:var(--stone);cursor:pointer; font-family:var(--sans);transition:color .2s ease,border-color .2s ease} .filters button.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:500} .filters button:hover{color:var(--ink)} /* ── 규격 표 (카탈로그 스펙 띠) ──────────────────────────────────── */ .tile-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap; border-top:1px solid var(--ink);border-bottom:none;padding:0;margin-bottom:52px} .ti-spec{display:flex;gap:0;flex-wrap:wrap;flex:1} .ti-spec>div{padding:20px 28px 20px 0;margin-right:28px;border-right:1px solid var(--line)} .ti-spec>div:last-child{border-right:none} .ti-spec .lab{display:block;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase; color:var(--stone);margin-bottom:7px;font-weight:500} .ti-spec b{font-weight:500;font-size:.96rem;color:var(--ink);font-variant-numeric:lining-nums tabular-nums} .ti-spec b.small{font-size:.8rem;font-weight:400;color:var(--ink-soft)} .tile-intro .btn{margin-bottom:14px} /* ── 시공 사례: 큰 사진이 왼쪽 여백을 뚫고 나가는 비대칭 배치 ────── */ .cases{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:56px} .case{margin:0} .c-big{grid-column:1 / span 7;margin-left:-88px} .c-cap{grid-column:9 / span 4;align-self:end;padding-bottom:10px} .c-a{grid-column:5 / span 4} .c-b{grid-column:9 / span 4} .case .shot{overflow:hidden;background:#ECE7DF} .c-big .shot{aspect-ratio:1000/625} .c-a .shot,.c-b .shot{aspect-ratio:700/540} .case .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} @media(hover:hover) and (pointer:fine){.case:hover .shot img{transform:scale(1.035)}} .ccap{border-top:1px solid var(--ink);margin-top:15px;padding-top:12px; display:flex;align-items:baseline;gap:13px;flex-wrap:wrap} .ccap .no{font-family:var(--disp);font-size:.82rem;color:var(--stone);letter-spacing:.16em} .ccap b{font-size:.94rem;font-weight:500;letter-spacing:-.015em} .c-big .ccap{margin-left:88px} .c-cap h3{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:400; letter-spacing:-.03em;line-height:1.5} .c-cap p{margin-top:18px;font-size:.94rem;line-height:1.8;color:var(--ink-70);max-width:42ch} @media(max-width:1180px){.c-big{margin-left:-56px}.c-big .ccap{margin-left:56px}} @media(max-width:980px){ .cases{grid-template-columns:1fr 1fr;row-gap:40px} .c-big{grid-column:1 / -1;margin-left:0} .c-big .ccap{margin-left:0} .c-cap{grid-column:1 / -1;padding-bottom:0} .c-a{grid-column:1}.c-b{grid-column:2} } @media(max-width:720px){ .cases{grid-template-columns:1fr} .c-a,.c-b{grid-column:1} } /* ── 공정: 여백에 걸리는 숫자 ────────────────────────────────────── */ .proc-grid{display:block;border-top:1px solid var(--ink)} .proc{display:grid;grid-template-columns:92px 240px 1fr;gap:32px;align-items:baseline; text-align:left;padding:28px 0;border-bottom:1px solid var(--line)} .proc .num{font-family:var(--disp);font-size:2.4rem;font-weight:300;color:var(--stone-light); line-height:.85;margin:0;display:block;font-variant-numeric:lining-nums tabular-nums} .proc b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:400; letter-spacing:-.03em;margin:0} .proc p{color:var(--ink-soft);font-size:.94rem;line-height:1.8} /* ── 성능 데이터시트 (구 adv-grid) ──────────────────────────────── */ .adv-grid{display:block;border-top:1px solid var(--ink);margin-bottom:22px} .adv{display:grid;grid-template-columns:40px 210px 1fr 300px;gap:30px;align-items:baseline; text-align:left;padding:26px 0;border:none;border-bottom:1px solid var(--line);transition:none} .adv:hover{background:transparent;transform:none} .adv .ic{color:var(--stone);align-self:center;font-size:0;margin:0} .adv .ic svg{display:block} .adv .m{font-family:var(--disp);font-size:2.7rem;font-weight:300;line-height:.92; font-variant-numeric:lining-nums tabular-nums;color:var(--ink);display:block} .adv .m i{font-style:normal;font-family:var(--sans);font-size:.84rem;font-weight:400; letter-spacing:-.01em;margin-left:5px;color:var(--ink-70)} .adv .m.word{font-family:var(--serif);font-size:1.7rem;letter-spacing:-.03em;line-height:1.15} .adv b{font-family:var(--serif);font-size:1.12rem;font-weight:400;letter-spacing:-.03em;display:block} .adv .d{display:block;margin-top:9px;font-size:.94rem;line-height:1.8;color:var(--ink-soft)} .adv .s{text-align:right;font-size:.86rem;color:var(--ink-70);line-height:1.7} .adv .s i{display:block;font-style:normal;margin-top:6px;font-size:.7rem;color:var(--stone);letter-spacing:.02em} .adv-note{margin-top:24px;color:var(--ink-70);font-size:.88rem;line-height:1.8;text-align:left;max-width:52ch} /* ── 성적서 · 인증 ───────────────────────────────────────────────── */ .cert-h{text-align:left;color:var(--ink);font-family:var(--serif);font-size:1.35rem; font-weight:400;letter-spacing:-.03em;margin:80px 0 10px; border-top:1px solid var(--ink);padding-top:22px} .cert-sub{text-align:left;color:var(--ink-soft);font-size:.96rem;line-height:1.8;margin-bottom:34px;max-width:46ch} .cert-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:none;margin:0} .cert-row figure{margin:0;text-align:left} .cert-row img{width:100%;background:#fff;border:1px solid var(--line);box-shadow:none} .cert-row figcaption{font-size:.86rem;color:var(--ink-soft);margin-top:14px;line-height:1.7; border-top:1px solid var(--ink);padding-top:12px} .certs{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:0;margin-top:26px; border-top:1px solid var(--line)} .cert{border:none;border-right:1px solid var(--line);padding:16px 26px 16px 0;margin-right:26px; font-size:.82rem;color:var(--ink-70);display:flex;align-items:center;gap:9px} .cert:last-child{border-right:none} .cert::before{content:"";width:5px;height:5px;background:var(--stone);flex:none} /* ── 내구성 표 ───────────────────────────────────────────────────── */ .dur-wrap{overflow-x:auto;max-width:none;margin:0} .dur-table{width:100%;border-collapse:collapse;min-width:640px} .dur-table th,.dur-table td{padding:17px 22px 17px 0;border-bottom:1px solid var(--line); font-size:.92rem;text-align:left;vertical-align:top;line-height:1.75} .dur-table thead th{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone); font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:13px} .dur-table .k{color:var(--ink);font-weight:500;white-space:nowrap} .dur-table .r{font-family:var(--disp);font-size:1.06rem;color:var(--ink);white-space:nowrap; font-variant-numeric:lining-nums tabular-nums} .dur-table .d{color:var(--ink-soft)} /* ── SCC 스펙 ────────────────────────────────────────────────────── */ .ct-logo{width:96px;height:96px;background:transparent;border:1px solid var(--line);border-radius:0; display:flex;align-items:center;justify-content:center;margin:0 0 22px;padding:20px} .ct-logo img{width:100%;height:100%;object-fit:contain} .scc-spec{max-width:none;margin:0 0 64px;text-align:left; display:grid;grid-template-columns:1fr 560px;gap:80px;align-items:start} .scc-spec h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:-.03em;margin-bottom:16px} .scc-spec p.lead{color:var(--ink-70);font-size:.98rem;line-height:1.8;margin-bottom:0;max-width:40ch} .scc-specs{display:block;border-top:1px solid var(--ink);max-width:none;margin:0;text-align:left} .scc-specs>div{display:flex;align-items:baseline;gap:26px;padding:19px 0;border-bottom:1px solid var(--line)} .scc-specs .lab{width:112px;flex:none;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase; color:var(--stone);margin-bottom:0;font-weight:500} .scc-specs .val{color:var(--ink);font-size:.96rem;line-height:1.6;font-variant-numeric:lining-nums tabular-nums} .scc-compare{color:var(--stone);font-size:.86rem;margin-top:22px} /* ── 비교표 ──────────────────────────────────────────────────────── */ .cmp-wrap{overflow-x:auto} .cmp-table{width:100%;border-collapse:collapse;min-width:820px;background:transparent} .cmp-table th,.cmp-table td{border:none;border-bottom:1px solid var(--line); padding:16px 14px;font-size:.8rem;text-align:center;vertical-align:middle} .cmp-table thead th{font-size:.84rem;letter-spacing:.02em;font-weight:500;background:transparent; padding:0 14px 14px;border-bottom:1px solid var(--ink);color:var(--ink-soft)} .cmp-table thead th.hl{background:transparent;color:var(--ink);font-weight:600} .cmp-table tbody th{font-weight:400;background:transparent;white-space:nowrap;text-align:left; padding-left:0;color:var(--ink);font-family:var(--serif);letter-spacing:-.02em;font-size:.92rem} .cmp-table tbody td{color:var(--stone)} .cmp-table tbody td.hl{background:var(--paper-2);color:var(--ink);font-weight:500} .cmp-table td.hl em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-soft); font-weight:400;margin-top:5px;letter-spacing:.01em} /* ── 납품 실적 ───────────────────────────────────────────────────── */ .track-head{display:flex;align-items:baseline;justify-content:flex-start;gap:16px;margin-bottom:40px} .track-head .big{font-family:var(--disp);font-size:4rem;line-height:1;color:var(--ink);font-weight:300} .track-head .big i{font-style:normal;font-size:1.9rem;color:var(--stone-light)} .track-head .cap{color:var(--ink-soft);font-size:.84rem;letter-spacing:.04em} .track-list{max-width:none;margin:0;border-top:1px solid var(--ink)} .track-list>div{display:grid;grid-template-columns:200px 1fr;gap:26px;padding:21px 0; border-bottom:1px solid var(--line);align-items:baseline} .track-list .lab{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:500} .track-list p{font-size:.9rem;color:var(--ink-70);line-height:1.8} /* ── WHY 카드 ────────────────────────────────────────────────────── */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)} .why-card{border:none;border-right:1px solid var(--line);background:transparent;padding:26px 30px 30px 0;margin-right:30px} .why-card:last-child{border-right:none;margin-right:0;padding-right:0} .why-card b{display:block;font-family:var(--serif);font-size:1.06rem;font-weight:400;letter-spacing:-.03em; margin-bottom:16px;padding-bottom:0;border-bottom:none} .why-card ul{list-style:none;display:grid;gap:10px} .why-card li{position:relative;padding-left:15px;font-size:.92rem;color:var(--ink-soft);line-height:1.8} .why-card li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:1px;background:var(--stone)} .why-close{text-align:left;margin-top:44px;font-size:1.15rem;font-family:var(--serif); letter-spacing:-.03em;color:var(--ink)} /* ── 시공 시스템 (featrow) ───────────────────────────────────────── */ .featrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px; padding-bottom:64px;border-bottom:1px solid var(--line)} .featrow:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none} .featrow.rev .txt{order:2} .featrow .txt h3{font-family:var(--serif);font-size:1.4rem;font-weight:400;letter-spacing:-.03em;margin-bottom:14px} .featrow .txt p{color:var(--ink-soft);margin-bottom:20px;font-size:1rem;line-height:1.8;max-width:40ch} .featrow .txt ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)} .featrow .txt li{position:relative;padding:14px 0;color:var(--ink-70);font-size:.94rem; line-height:1.8;border-bottom:1px solid var(--line)} .featrow .txt li::before{display:none} .featrow .imgs{display:grid;gap:14px} .featrow .imgs.two{grid-template-columns:1fr 1fr} .featrow .imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border:none;background:#ECE7DF} .featrow .imgs .tall{grid-row:span 2} .imgs img.diag{object-fit:contain;background:var(--paper);padding:18px;border:1px solid var(--line);aspect-ratio:4/3} .method-wrap{margin-top:8px} .method-wrap img{width:100%;border:1px solid var(--line);background:#fff} /* ── 공지사항 ────────────────────────────────────────────────────── */ .notice-section{background:var(--paper)} .notice-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:40px; border-top:1px solid var(--ink);border-bottom:none;padding:26px 0 34px;margin-bottom:0} .notice-hero h3{font-family:var(--serif);font-size:1.45rem;font-weight:400;letter-spacing:-.03em;margin:12px 0 12px} .notice-hero p{max-width:44ch;color:var(--ink-soft);font-size:1rem;line-height:1.8} .notice-tag{display:inline-flex;align-items:center;padding:5px 12px;background:var(--ink);color:var(--paper); font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500} .notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:0;border-top:1px solid var(--line)} .notice-card{border:none;border-right:1px solid var(--line);padding:28px 32px 30px 0;margin-right:32px;background:transparent} .notice-card:last-child{border-right:none;margin-right:0;padding-right:0} .notice-card.primary{background:transparent} .notice-card h3{font-family:var(--serif);font-size:1.06rem;margin-bottom:14px;font-weight:400;letter-spacing:-.03em} .notice-card p{color:var(--ink-soft);font-size:.94rem;line-height:1.8} .notice-card ul{list-style:none;display:grid;gap:0;margin-top:16px;border-top:1px solid var(--line)} .notice-card li{position:relative;padding:11px 0;font-size:.92rem;color:var(--ink-70);border-bottom:1px solid var(--line)} .notice-card li::before{display:none} .okno{display:grid;gap:0;margin-bottom:16px;border-top:1px solid var(--line)} .okno div{display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:baseline; padding:12px 0;border-bottom:1px solid var(--line)} .okno b{font-size:.76rem;letter-spacing:.16em;color:var(--stone);font-weight:500} .okno span{font-size:.92rem;color:var(--ink)} .notice-flow{margin:44px 0;padding:0;background:transparent} .notice-flow h3{font-family:var(--serif);font-size:1.25rem;font-weight:400;letter-spacing:-.03em; margin-bottom:0;text-align:left;border-top:1px solid var(--ink);padding-top:22px} .flow-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;border-top:1px solid var(--line)} .flow-list div{background:transparent;border:none;border-right:1px solid var(--line); padding:24px 30px 26px 0;margin-right:30px} .flow-list div:last-child{border-right:none;margin-right:0;padding-right:0} .flow-list span{display:block;font-family:var(--disp);font-size:1.9rem;color:var(--stone-light); margin-bottom:10px;font-weight:300;line-height:1} .flow-list b{display:block;font-family:var(--serif);font-size:1rem;font-weight:400; letter-spacing:-.03em;margin-bottom:9px} .flow-list p,.notice-note{color:var(--ink-soft);font-size:.94rem;line-height:1.8} .notice-note{text-align:left;margin-top:20px} .notice-links{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start; border-top:1px solid var(--ink);border-bottom:none;padding:26px 0 0;margin:44px 0 0} .notice-links h3{font-family:var(--serif);font-size:1.06rem;margin-bottom:10px;font-weight:400;letter-spacing:-.03em} .notice-links p{color:var(--ink-soft);font-size:.94rem;line-height:1.8;max-width:42ch} .link-stack{display:grid;gap:0;border-top:1px solid var(--line)} .link-stack a,.text-link{display:flex;align-items:center;justify-content:space-between; border:none;border-bottom:1px solid var(--line);padding:18px 0;font-size:.94rem;color:var(--ink); transition:color .2s ease,padding-left .2s var(--ease)} .link-stack a::after,.text-link::after{content:"↗";font-size:.84rem;color:var(--stone);margin-left:12px} .link-stack a:hover,.text-link:hover{border-color:var(--ink);background:transparent;color:var(--stone);padding-left:8px} .link-stack a:hover::after,.text-link:hover::after{color:var(--stone)} .text-link{display:inline-flex;margin-top:14px} /* ── 문의 · 오시는 길 ────────────────────────────────────────────── */ .contact-band{background:var(--dark);color:var(--dark-fg);padding:104px 0 92px} .contact-band .sec-title{border-top-color:var(--dark-line)} .contact-band .sec-title h2{color:var(--dark-fg)} .contact-band .sec-title .kicker{color:var(--dark-dim)} .contact-band .sec-title p{color:var(--dark-soft)} .cgrid{display:grid;grid-template-columns:1fr 540px;gap:80px;align-items:start} .cgrid h2{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.25rem);font-weight:400; letter-spacing:-.035em;line-height:1.4;color:var(--dark-fg)} .cgrid .sub{margin-top:22px;font-size:.98rem;line-height:1.8;color:var(--dark-soft);max-width:38ch} .cgrid .btn{margin-top:34px} .crow{display:flex;align-items:baseline;gap:26px;padding:18px 0;border-bottom:1px solid var(--dark-line)} .crow:first-child{border-top:1px solid var(--dark-line)} .crow .k{width:128px;flex:none;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dark-dim)} .crow .v{font-size:.94rem;color:var(--dark-fg);font-variant-numeric:lining-nums tabular-nums;line-height:1.6} .crow .v small{display:block;font-size:.86rem;color:var(--dark-dim);margin-top:5px} /* 문의 전에 먼저 읽을 것 — 전화보다 정보를 앞에 놓는다 */ .prechk{margin-top:34px;border-top:1px solid var(--dark-line)} .prechk a{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline; padding:15px 0;border-bottom:1px solid var(--dark-line);font-size:.88rem;color:var(--dark-fg); transition:padding-left .2s var(--ease),color .2s ease} .prechk a span{font-family:var(--disp);font-size:.8rem;color:var(--stone-light);letter-spacing:.12em; font-variant-numeric:lining-nums} .prechk a:hover{padding-left:8px;color:var(--stone-light)} a.crow-v:hover,.crow a.v:hover{color:var(--stone)} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px} .info-row{display:flex;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)} .info-row:first-child{border-top:1px solid var(--line)} .info-row .lab{min-width:96px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--stone);padding-top:4px;font-weight:500} .info-row .val{font-size:.94rem} .info-row .val a{border-bottom:1px solid var(--line)} .map-box{margin-top:28px;aspect-ratio:16/8;background:var(--paper-2);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--stone);font-size:.82rem;text-align:center;padding:20px} .contact-simple{max-width:none;margin:0;text-align:left;border-top:1px solid var(--ink)} .contact-simple .ci{display:flex;align-items:baseline;gap:26px;padding:19px 0;border-bottom:1px solid var(--line)} .contact-simple .ci:first-child{border-top:none} .contact-simple .ci .lab{width:200px;flex:none;display:block;font-size:.74rem;letter-spacing:.2em; text-transform:uppercase;color:var(--stone);margin-bottom:0;font-weight:500} .contact-simple .ci a,.contact-simple .ci .v{font-size:1rem;color:var(--ink);font-family:var(--sans);letter-spacing:-.01em} .contact-simple .ci a:hover{color:var(--stone)} /* 터치 타깃 최소 44px — 연락처처럼 인라인 링크가 실제 탭 대상인 곳 */ .contact-simple .ci a,.crow .v[href],.info-row .val a{display:inline-flex;align-items:center;min-height:44px} /* 폼 */ .field{margin-bottom:18px} .field label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--stone);margin-bottom:8px;font-weight:500} .field label .req{color:var(--ink)} .field input,.field select,.field textarea{width:100%;padding:14px 15px;border:1px solid var(--line); background:var(--paper);font-family:var(--sans);font-size:.92rem;color:var(--ink); border-radius:0;transition:border-color .2s ease} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)} .field textarea{resize:vertical;min-height:120px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--ink-soft);margin:6px 0 20px} .consent input{margin-top:5px;width:auto} .consent a{text-decoration:underline} .form-msg{display:none;margin-top:16px;padding:13px 16px;font-size:.86rem;border:1px solid var(--line)} .form-msg.ok{display:block;background:var(--paper-2);color:var(--ink)} .form-msg.err{display:block;background:var(--paper-2);color:var(--ink);border-color:var(--ink)} .form-note{font-size:.84rem;color:var(--stone);margin-top:14px} /* ── CTA 띠 ──────────────────────────────────────────────────────── */ .cta-band{background:var(--paper-2);color:var(--ink);text-align:left;padding:88px 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end} .cta-band h2{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:400; letter-spacing:-.035em;margin-bottom:12px} .cta-band p{color:var(--ink-soft);margin-bottom:0;font-size:.98rem;line-height:1.8;max-width:42ch} .cta-actions{display:flex;gap:14px;flex-wrap:wrap} /* ── 푸터 ────────────────────────────────────────────────────────── */ footer{background:var(--dark);color:var(--dark-dim);padding:56px 0 28px} .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:44px} .foot-logo{font-family:var(--serif);font-size:1.24rem;letter-spacing:.02em;color:var(--dark-fg);font-weight:500} .foot-logo small{display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:.26em; margin-top:8px;color:var(--dark-dim);text-transform:uppercase;font-weight:500} /* 라틴 워드마크(ONE CORPORATION 등)는 넓은 자간이 어울린다 */ .foot-logo.lat,.gate-top .logo{font-family:var(--disp);letter-spacing:.4em; text-transform:uppercase;font-weight:400} .foot-desc{margin-top:16px;max-width:380px;font-size:.92rem;line-height:1.8;color:var(--dark-dim)} .foot-cols{display:flex;gap:64px;flex-wrap:wrap} .foot-cols h4{color:var(--dark-fg);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; margin-bottom:16px;font-weight:500} .foot-cols a,.foot-cols p{display:block;font-size:.88rem;margin-bottom:10px;color:var(--dark-dim)} .foot-cols a:hover{color:var(--dark-fg)} .foot-bottom{border-top:1px solid var(--dark-line);padding-top:22px;display:flex; justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--dark-dim)} /* 브랜드 입구 — 눌러서 그 회사 페이지로. 채워지는 문처럼 동작한다. */ /* 진입 패널 — 위아래 괘선만 두니 페이지의 다른 구분선과 똑같이 보여 '누를 수 있는 것'으로 안 읽혔다. 사방 테두리 + 옅은 바탕으로 덩어리를 만들고, 오른쪽 끝은 진짜 버튼 모양으로 채운다. (2026-08-24) */ .st-door{grid-column:2 / -1;margin-top:68px;display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr) auto;gap:48px;align-items:center; border-top:1px solid var(--ink);border-bottom:1px solid var(--line); padding:46px 40px;position:relative;isolation:isolate; transition:color .45s var(--ease)} .st-door::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)} .st-door .d-name b{display:block;font-family:var(--serif);font-size:2.5rem;font-weight:400; letter-spacing:-.045em;line-height:1.1} .st-door .d-name em{font-style:normal;font-family:var(--disp);font-size:1rem;letter-spacing:.24em; text-transform:uppercase;color:var(--stone);display:block;margin-top:10px;transition:color .3s var(--ease)} .st-door .d-desc{font-size:.94rem;line-height:1.8;max-width:40ch;color:var(--ink-70);transition:color .3s var(--ease)} .st-door .d-go{display:inline-flex;align-items:center;gap:20px;white-space:nowrap; font-size:.82rem;letter-spacing:.1em;font-weight:500} @media(hover:hover) and (pointer:fine){ .st-door:hover{color:var(--paper)} .st-door:hover::before{transform:scaleY(1)} .st-door:hover .d-name em,.st-door:hover .d-desc{color:rgba(250,248,244,.7)} /* 패널이 검게 차면 원은 반대로 밝아진다 — 그래야 계속 '누르는 곳'으로 보인다 */ .st-door:hover .arw-c{background:var(--paper);border-color:var(--paper);color:var(--ink)} .st-door:hover .arw-c svg{transform:translateX(3px)} } .st-door:focus-visible{outline-offset:6px} /* 전폭 사진 — 이야기 중간의 숨 고르기 */ .st-wide{margin:0;position:relative} .st-wide img{width:100%;height:clamp(320px,42vw,600px);object-fit:cover;background:#ECE7DF} .st-wide figcaption{max-width:var(--maxw);margin:0 auto;padding:15px 88px 48px; display:flex;align-items:baseline;gap:13px;font-size:.82rem;color:var(--ink-70)} .st-wide figcaption .no{font-family:var(--disp);color:var(--stone);letter-spacing:.14em} .st-wide figcaption b{font-weight:500;letter-spacing:-.01em;color:var(--ink)} .st-wide figcaption .s{margin-left:auto;color:var(--stone);font-size:.84rem;letter-spacing:.06em} /* ── 홈: 회사 이야기 (index) ──────────────────────────────────── 글이 주인공. 사진은 근거로만 쓴다. 장(章)마다 번호를 여백에 건다. */ .lat{font-family:var(--disp) !important;letter-spacing:.4em !important;text-transform:uppercase} .st-lab{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);font-weight:500} .st-open{padding-top:200px;padding-bottom:130px;border-bottom:1px solid var(--line)} .st-open .st-lab{margin-bottom:44px} .st-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:end} .st-toc{border-top:1px solid var(--ink);padding-top:18px} .st-toc .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone); font-weight:500;margin-bottom:6px} .st-toc a{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline; padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem;transition:padding-left .2s var(--ease)} .st-toc a:last-child{border-bottom:none} .st-toc a .n{font-family:var(--disp);font-size:.82rem;color:var(--stone);letter-spacing:.12em; font-variant-numeric:lining-nums} .st-toc a:hover{padding-left:6px;color:var(--stone)} .st-open h1{font-family:var(--serif);font-size:clamp(2.05rem,4.9vw,4.4rem);font-weight:400; letter-spacing:-.045em;line-height:1.42;max-width:20ch} .st-open h1 .q{color:var(--stone-light)} .st-open .st-sub{margin-top:52px;padding-top:30px;border-top:1px solid var(--ink); display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start} .st-open .st-sub p{font-size:1.02rem;line-height:1.85;color:var(--ink-70);max-width:42ch} .st-open .who{text-align:right;font-size:.84rem;line-height:1.9;color:var(--stone)} .st-open .who b{display:block;color:var(--ink);font-weight:500;font-size:.84rem;margin-bottom:5px} /* 첫 화면 회사 선택 — 두 회사로 가는 문이 3~4장쯤 스크롤해야 나와서 "어디로 가야 하지"가 먼저 걸렸다. 이야기를 밀어내지 않도록 여는 글 다음에 둔다. 카드 두 장을 나란히 놓으면 UI처럼 보인다. 한 장의 지면을 세로 괘선으로 가르고, 채운 버튼 대신 원형 화살표로 '누르는 곳'을 알린다. 여백이 넓을수록 비싸 보인다. (2026-08-24) */ .st-pick{margin-top:76px;display:grid;grid-template-columns:1fr 1fr;gap:0; border-top:1px solid var(--ink);border-bottom:1px solid var(--line)} .st-pick .pick{display:flex;flex-direction:column;align-items:flex-start; padding:54px 52px 46px;position:relative;isolation:isolate; transition:color .45s var(--ease)} .st-pick .pick+.pick{border-left:1px solid var(--line)} .st-pick .pick::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)} .st-pick .p-k{font-family:var(--disp);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase; color:var(--stone);font-variant-numeric:lining-nums;transition:color .45s var(--ease)} .st-pick .p-name{margin-top:26px;font-family:var(--serif);font-weight:400; font-size:clamp(2.3rem,3.6vw,3.2rem);letter-spacing:-.05em;line-height:1.06} .st-pick .p-what{margin-top:24px;font-size:.96rem;line-height:1.85;color:var(--ink-70); max-width:30ch;transition:color .45s var(--ease)} .st-pick .p-go{margin-top:auto;padding-top:44px;display:inline-flex;align-items:center;gap:20px; font-size:.82rem;letter-spacing:.1em;font-weight:500} /* 원형 화살표 — 채우지 않고도 누르는 곳임을 알리는 장치 */ .arw-c{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:54px;height:54px;border:1px solid var(--ink);border-radius:50%; transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)} .arw-c svg{transition:transform .45s var(--ease)} @media(hover:hover) and (pointer:fine){ .st-pick .pick:hover{color:var(--paper)} .st-pick .pick:hover::before{transform:scaleY(1)} .st-pick .pick:hover .p-k,.st-pick .pick:hover .p-what{color:rgba(250,248,244,.7)} .st-pick .pick:hover .arw-c{background:var(--paper);border-color:var(--paper);color:var(--ink)} .st-pick .pick:hover .arw-c svg{transform:translateX(3px)} } .st-pick .pick:focus-visible{outline-offset:-4px} /* 장(章) = 번호 · 본문 · 근거난(margin). 오른쪽은 빈 공간이 아니라 근거를 놓는 자리다. */ .st-ch{display:grid;grid-template-columns:96px minmax(0,560px) minmax(0,1fr); column-gap:56px;row-gap:0;padding-top:112px;padding-bottom:112px;border-bottom:1px solid var(--line)} .st-ch:last-of-type{border-bottom:none} .st-side{align-self:start;padding-top:14px} .st-side figure{margin:0} .st-side img{width:100%;max-width:320px;height:auto;background:#ECE7DF} .st-side .fig-cap{max-width:320px;margin-top:13px;padding-top:11px;border-top:1px solid var(--ink); display:flex;align-items:baseline;gap:11px;font-size:.8rem} .st-side .fig-cap .no{font-family:var(--disp);font-size:.84rem;color:var(--stone);letter-spacing:.14em} .st-side .fig-cap b{font-weight:500;letter-spacing:-.01em} .st-side .memo{max-width:320px;border-top:1px solid var(--ink);padding-top:18px} .st-side .memo .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone); font-weight:500;margin-bottom:12px} .st-side .memo p{font-family:var(--serif);font-size:1rem;line-height:1.8;letter-spacing:-.03em;color:var(--ink)} .st-side .memo .src{margin-top:14px;font-family:var(--sans);font-size:.8rem;color:var(--stone);letter-spacing:0} .st-side .certs3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:320px} .st-side .certs3 img{width:100%;border:1px solid var(--dark-line);max-width:none} .st-num{font-family:var(--disp);font-size:3.4rem;font-weight:300;letter-spacing:.02em; color:var(--stone-light);line-height:.82;padding-top:4px;font-variant-numeric:lining-nums} .st-ch h2{font-family:var(--serif);font-size:clamp(1.6rem,2.9vw,2.5rem);font-weight:400; letter-spacing:-.04em;line-height:1.42;max-width:22ch} .st-body{margin-top:30px;font-size:1.02rem;line-height:1.85;color:var(--ink-70);max-width:none} .st-body + .st-body{margin-top:22px} .st-probs{margin-top:44px;border-top:1px solid var(--ink)} .st-probs>div{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:baseline; padding:19px 0;border-bottom:1px solid var(--line)} .st-probs.two>div{grid-template-columns:230px 1fr} .st-probs b{font-family:var(--serif);font-size:1rem;font-weight:400;letter-spacing:-.03em} .st-probs span{font-size:.92rem;color:var(--ink-soft);line-height:1.8} .st-pull{margin-top:48px;padding-left:34px;border-left:1px solid var(--ink); font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:400; letter-spacing:-.035em;line-height:1.7;max-width:none;color:var(--ink);text-wrap:balance} .st-brand{margin-top:52px;display:grid;grid-template-columns:200px 1fr;gap:30px; align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:34px 0} .st-brand .pic{height:150px;overflow:hidden;background:#ECE7DF} .st-brand .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} @media(hover:hover) and (pointer:fine){.st-brand:hover .pic img{transform:scale(1.04)}} .st-brand .t b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:400;letter-spacing:-.04em} .st-brand .t em{font-style:normal;font-family:var(--disp);font-size:.94rem;letter-spacing:.22em; text-transform:uppercase;color:var(--stone);display:block;margin-top:8px} .st-brand .t p{margin-top:16px;font-size:.96rem;line-height:1.8;color:var(--ink-70);max-width:40ch} .st-brand .btn{white-space:nowrap;grid-column:2;justify-self:start;margin-top:4px} .st-proof{background:var(--dark);color:var(--dark-fg);padding:112px 0} .st-proof .st-ch{border-bottom:none;padding-top:0;padding-bottom:0} .st-proof .st-num{color:var(--stone-light)} .st-proof h2{color:var(--dark-fg)} .st-proof .st-body{color:var(--dark-soft)} .st-proof .st-side .fig-cap{border-top-color:rgba(239,234,226,.5);color:var(--dark-fg)} .st-proof .st-side .fig-cap .no{color:var(--stone-light)} .st-proof .st-side .memo{border-top-color:rgba(239,234,226,.5)} .st-proof .st-side .memo .k{color:var(--stone-light)} .st-proof .st-side .memo p{color:var(--dark-fg)} .st-proof .st-side .memo .src{color:var(--dark-dim)} .st-facts{margin-top:52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(239,234,226,.38)} .st-facts>div{padding:28px 30px 28px 0;border-right:1px solid var(--dark-line);margin-right:30px; border-bottom:1px solid var(--dark-line)} .st-facts>div:nth-child(2n){border-right:none;margin-right:0} .st-facts>div:nth-last-child(-n+2){border-bottom:none;padding-bottom:0} .st-facts .n{font-family:var(--disp);font-size:2.6rem;font-weight:300;line-height:1; font-variant-numeric:lining-nums tabular-nums;color:#FAF8F4} .st-facts .n i{font-style:normal;font-family:var(--sans);font-size:.94rem;margin-left:5px} .st-facts .l{margin-top:14px;font-size:.86rem;color:var(--dark-dim);line-height:1.75} .st-sites{margin-top:44px;display:flex;flex-wrap:wrap;font-size:.86rem;color:var(--dark-soft); border-top:1px solid var(--dark-line);padding-top:22px} .st-sites span{padding-right:26px;margin-right:26px;border-right:1px solid var(--dark-line)} .st-sites span:last-child{border-right:none;margin-right:0;padding-right:0} .st-end{padding-top:112px;padding-bottom:96px} .st-end h2{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.35rem);font-weight:400; letter-spacing:-.04em;line-height:1.5;max-width:24ch} .st-info{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)} .st-info>div{padding:28px 30px 0 0;border-right:1px solid var(--line);margin-right:30px} .st-info>div:last-child{border-right:none;margin-right:0} .st-info .k{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone); font-weight:500;margin-bottom:12px} .st-info .v{font-size:.96rem;line-height:1.8} .st-info .v .sm{display:block;margin-top:8px;font-size:.86rem;color:var(--stone)} .st-info .v a{border-bottom:1px solid var(--line)} .st-info .v a:hover{color:var(--stone)} @media(max-width:1180px){ .st-open .st-sub{grid-template-columns:1fr;gap:26px} .st-pick .pick{padding:44px 34px 38px} .st-open .who{text-align:left} .st-head{grid-template-columns:1fr;gap:44px;align-items:start} .st-toc{max-width:420px} .st-ch{grid-template-columns:96px minmax(0,1fr)} .st-side{grid-column:2;padding-top:0;margin-top:52px} .st-door{grid-column:2;grid-template-columns:minmax(0,1fr);gap:26px;padding:38px 30px} .st-wide figcaption{padding:15px 56px 40px} .st-side img,.st-side .fig-cap,.st-side .memo,.st-side .certs3{max-width:420px} } @media(max-width:980px){ .st-open{padding-top:140px;padding-bottom:80px} .st-ch{grid-template-columns:1fr;gap:0;padding-top:72px;padding-bottom:72px} .st-num{padding-top:0;margin-bottom:22px} .st-side{grid-column:1;margin-top:44px} .st-num{font-size:2.6rem} .st-door{grid-column:1} .st-facts{grid-template-columns:1fr 1fr} .st-info{grid-template-columns:1fr 1fr;row-gap:12px} .st-info>div:nth-child(2n){border-right:none;margin-right:0} .st-proof{padding:80px 0} } @media(max-width:720px){ .st-open{padding-top:120px;padding-bottom:60px} .st-probs>div,.st-probs.two>div{grid-template-columns:1fr;gap:7px;padding:16px 0} .st-pull{padding-left:22px;margin-top:38px} .st-door{margin-top:48px;padding:34px 0;gap:22px} .st-door .d-name b{font-size:2rem} .st-pick{grid-template-columns:1fr;margin-top:52px} .st-pick .pick{padding:36px 0 32px} /* 1열이 되면 세로 괘선은 뜻이 없다 — 가로로 나눈다 */ .st-pick .pick+.pick{border-left:none;border-top:1px solid var(--line)} .st-pick .p-go{padding-top:34px} .arw-c{width:50px;height:50px} .st-wide figcaption{padding:15px 22px 32px;flex-wrap:wrap} .st-wide figcaption .s{margin-left:0;flex-basis:100%} .st-brand{grid-template-columns:1fr;gap:22px;padding:26px 0} .st-brand .pic{height:150px} .st-brand .btn{grid-column:1;width:100%;justify-content:center;height:56px;margin-top:0} .st-side img,.st-side .fig-cap,.st-side .memo,.st-side .certs3{max-width:none} .st-facts,.st-info{grid-template-columns:1fr} .st-facts>div{border-right:none;margin-right:0;padding:22px 0 0;border-bottom:1px solid var(--dark-line)} .st-facts>div:last-child{border-bottom:none} .st-info>div{border-right:none;margin-right:0;padding:22px 0 22px;border-bottom:1px solid var(--line)} .st-info>div:last-child{border-bottom:none} .st-sites span{border-right:none;padding-right:0;margin-right:20px} .st-end{padding-top:72px;padding-bottom:64px} } /* ── 라이트박스 ──────────────────────────────────────────────────── */ .lightbox{position:fixed;inset:0;z-index:1000;background:rgba(19,16,12,.95);display:none; align-items:center;justify-content:center} .lightbox.open{display:flex} .lightbox img{max-width:92vw;max-height:86vh;object-fit:contain} .lightbox .lb-close{position:absolute;top:22px;right:28px;color:var(--dark-fg);font-size:1.9rem; cursor:pointer;line-height:1;background:none;border:none;width:44px;height:44px} .lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--dark-fg); font-size:2.2rem;cursor:pointer;background:none;border:none;padding:10px 18px;opacity:.7; min-width:44px;min-height:44px} .lightbox .lb-nav:hover{opacity:1} .lightbox .lb-prev{left:14px}.lightbox .lb-next{right:14px} .lightbox .lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%); color:var(--dark-dim);font-size:.78rem;letter-spacing:.12em;font-variant-numeric:lining-nums tabular-nums} /* ── 카탈로그 뷰어 ───────────────────────────────────────────────── */ .catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .catgrid .pg{cursor:pointer;background:#ECE7DF;overflow:hidden} .catgrid .pg img{width:100%;transition:transform .6s var(--ease)} .catgrid .pg:hover img{transform:scale(1.03)} .catmore{margin-top:36px;display:flex;justify-content:center} /* ── 석종별 공간 연출 갤러리 ─────────────────────────────────────── */ .tile-kitchen{border-top:1px solid var(--ink);padding-top:30px} .tile-kitchen-head{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center;margin-bottom:30px} .tile-kitchen-texture{aspect-ratio:4/5;background:#ECE7DF;border:none;overflow:hidden} .tile-kitchen-texture img{width:100%;height:100%;object-fit:cover} .tile-kitchen-title .ey{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase; color:var(--stone);margin-bottom:10px;font-weight:500} .tile-kitchen-title h3{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.9rem); font-weight:400;letter-spacing:-.03em;margin-bottom:10px} .tile-kitchen-title p{color:var(--ink-soft);font-size:.96rem;line-height:1.8;max-width:44ch} .tile-kitchen-controls{display:flex;align-items:center;justify-content:space-between;gap:24px; border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0; margin-bottom:26px;flex-wrap:wrap} .stone-select{display:flex;align-items:center;gap:14px} .stone-select label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);font-weight:500} .stone-select select{min-width:300px;max-width:100%;padding:12px 40px 12px 14px;border:1px solid var(--line); background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:.88rem;border-radius:0} .tile-kitchen .filters{justify-content:flex-start;margin:0} .stone-strip{display:flex;gap:12px;overflow-x:auto;padding:3px 0 18px;margin-bottom:22px;scrollbar-width:thin} .stone-chip{display:grid;grid-template-columns:44px 150px;align-items:center;gap:12px;min-width:214px; padding:8px;border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left; transition:border-color .2s ease,background .2s ease;font-family:var(--sans);border-radius:0} .stone-chip:hover,.stone-chip.active{border-color:var(--ink);background:var(--paper-2)} .stone-chip img{width:44px;height:54px;object-fit:cover;background:#ECE7DF} .stone-chip span{display:block;line-height:1.25} .stone-chip b{display:block;font-size:.8rem;font-weight:500;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stone-chip em{display:block;font-style:normal;font-family:var(--disp);font-size:.78rem;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;letter-spacing:.04em} .tile-render-grid{margin-top:8px} .tile-render-card .imgbox{aspect-ratio:3/2} .tile-kitchen-note{margin-top:30px;text-align:left;color:var(--ink-70);font-size:.88rem;line-height:1.8;max-width:52ch} .space-desc{color:var(--stone);font-size:.78rem;margin-top:2px} /* ── 한글 라벨 자간 보정 ───────────────────────────────────────── 작은 대문자+넓은 자간은 라틴 전용 표기(.kicker, .hero .ey 등)에만 어울린다. 한글이 들어가는 라벨은 글자가 흩어져 보이므로 자간을 좁힌다. */ .scc-specs .lab,.ti-spec .lab,.crow .k,.track-list .lab,.okno b, .info-row .lab,.contact-simple .ci .lab,.dur-table thead th, .field label,.foot-cols h4,.notice-tag,.cert{letter-spacing:.08em} /* Cormorant는 기본이 옛스타일 숫자(o1)라 색인 번호가 글자처럼 읽힌다 */ .ccap .no,.spec .no,.sec-title .kicker,.stone-chip em{font-variant-numeric:lining-nums} /* 섹션을 여는 브랜드 마크 — 상자 없이 조용하게 */ .ct-logo{width:56px;height:56px;border:none;padding:0;margin:0 0 22px;opacity:.9} /* ── 공간 적용 갤러리 = 어두운 전시실 ───────────────────────────── 밝은 실내 사진은 어두운 배경에서 가장 살아난다. 페이지 흐름에서 이 구간만 어둡게 떨어뜨려, 넘기다가 눈이 멈추게 한다. */ .spaces{background:var(--dark);color:var(--dark-fg);padding:124px 0} .spaces .sec-title{border-top-color:rgba(239,234,226,.42)} .spaces .sec-title h2{color:var(--dark-fg)} .spaces .sec-title .kicker{color:var(--stone-light)} .spaces .sec-title p{color:var(--dark-soft)} .spaces .tile-kitchen{border-top-color:var(--dark-line);padding-top:34px} .spaces .tile-kitchen-texture{background:#241F19} .spaces .tile-kitchen-title .ey{color:var(--stone-light)} .spaces .tile-kitchen-title h3{color:var(--dark-fg)} .spaces .tile-kitchen-title p{color:var(--dark-soft)} .spaces .tile-kitchen-controls{border-top-color:var(--dark-line);border-bottom-color:var(--dark-line)} .spaces .stone-select label{color:var(--dark-dim)} .spaces .stone-select select{background:#1D1913;border-color:var(--dark-line);color:var(--dark-fg)} .spaces .filters button{color:var(--dark-dim)} .spaces .filters button.active{color:var(--dark-fg);border-bottom-color:var(--dark-fg)} .spaces .filters button:hover{color:var(--dark-fg)} .spaces .stone-chip{background:#1D1913;border-color:var(--dark-line)} .spaces .stone-chip:hover,.spaces .stone-chip.active{background:#2A241C;border-color:var(--dark-fg)} .spaces .stone-chip b{color:var(--dark-fg)} .spaces .stone-chip em{color:var(--dark-dim)} .spaces .stone-chip img{background:#241F19} .spaces .card .imgbox{background:#241F19} .spaces .card .cap{border-top-color:rgba(239,234,226,.5)} .spaces .card .cap b{color:var(--dark-fg)} .spaces .card .cap span{color:var(--dark-dim)} .spaces .tile-kitchen-note{color:var(--dark-dim)} /* 확대해 볼 수 있다는 걸 알려주는 표시 */ .spaces .tile-render-card{position:relative} .spaces .tile-render-card .imgbox::after{content:"＋";position:absolute;right:0;bottom:0; width:38px;height:38px;display:flex;align-items:center;justify-content:center; background:var(--dark);color:var(--dark-fg);font-size:.9rem;opacity:0;transition:opacity .25s ease} @media(hover:hover) and (pointer:fine){ .spaces .tile-render-card:hover .imgbox::after{opacity:1} } @media(max-width:720px){.spaces{padding:76px 0}} /* ── 등장 애니메이션 ─────────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .gate .half img,.card .imgbox img,.catgrid .pg img{transition:none} html{scroll-behavior:auto} } /* ── 반응형 ──────────────────────────────────────────────────────── */ @media (max-width:1180px){ .wrap{padding:0 56px} .hero.split{grid-template-columns:1fr 1fr} .hero.split .inner{padding:0 40px 0 56px} .scc-spec,.cgrid{grid-template-columns:1fr;gap:44px} .gate .half{padding:48px} .gate-top{padding:26px 48px} } @media (max-width:980px){ .nav{display:none} .hamburger{display:flex} .grid{grid-template-columns:repeat(3,1fr)} .adv{grid-template-columns:34px 150px 1fr;gap:22px} .adv .s{grid-column:2 / -1;text-align:left;margin-top:10px} .adv .m{font-size:2.1rem} .proc-grid{grid-template-columns:1fr} .proc{grid-template-columns:64px 1fr;gap:20px} .proc p{grid-column:2} .contact-grid{grid-template-columns:1fr;gap:34px} .section{padding:76px 0} .gate{grid-template-columns:1fr} .why-grid,.notice-grid,.flow-list{grid-template-columns:1fr 1fr} .why-card,.notice-card,.flow-list div{padding-right:26px;margin-right:26px} .cert-row{grid-template-columns:1fr 1fr} .featrow{grid-template-columns:1fr;gap:30px;margin-bottom:44px;padding-bottom:44px} .featrow.rev .txt{order:0} .notice-links{grid-template-columns:1fr;gap:26px} .cta-band .wrap{grid-template-columns:1fr;gap:28px;align-items:start} .track-list>div{grid-template-columns:1fr;gap:6px} .tile-kitchen-head{grid-template-columns:150px 1fr;gap:22px} .stone-select{width:100%} .stone-select select{flex:1;min-width:0} .nav.open{display:flex;position:fixed;inset:0;background:var(--paper);flex-direction:column; align-items:flex-start;justify-content:center;gap:0;z-index:115;padding:40px 56px} .nav.open>li{width:100%;text-align:left;border-bottom:1px solid var(--line)} .nav.open>li>a{color:var(--ink);font-size:1.02rem;justify-content:flex-start;padding:16px 0;font-family:var(--serif)} .nav.open .drop{position:static;transform:none;opacity:1;visibility:visible;border:none; background:transparent;pointer-events:auto;min-width:0;padding:0 0 12px} .nav.open .drop a{color:var(--ink-soft);text-align:left;padding:8px 0} .nav.open .ext{display:inline-block;margin-top:16px;border-left:none;padding-left:0 !important} } @media (max-width:720px){ .wrap{padding:0 22px} /* 라틴 워드마크는 자간이 넓어 좁은 화면에서 햄버거를 밀어낸다 */ .logo.lat{font-size:.92rem;letter-spacing:.22em} .logo.lat small{font-size:.48rem;letter-spacing:.18em} .sec-title{grid-template-columns:1fr;row-gap:10px} .sec-title p{justify-self:start;text-align:left;max-width:none} .hero{min-height:auto;padding-top:56px} /* 세로로 쌓을 때는 명시적 행 배치로 — order만 바꾸면 데스크톱의 grid-row:1 지정이 남아 사진과 글이 같은 칸에서 겹친다 */ .hero.split{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:auto} .hero.split img.bgimg{grid-column:1;grid-row:1;height:320px} .hero.split .inner{grid-column:1;grid-row:2;padding:44px 22px 48px} .hero.split .hero-plate{position:static;grid-column:1;grid-row:1; align-self:end;justify-self:end;padding:11px 18px 9px} .hero .inner{padding:76px 22px 60px} .stats{grid-template-columns:1fr} .stat{padding:19px 0;border-left:none;border-bottom:1px solid var(--line); display:flex;align-items:baseline;justify-content:space-between;gap:18px} .stat:last-child{border-bottom:none} .stat .n{font-size:1.45rem;order:2;text-align:right;flex:none} .stat .l{margin-top:0;order:1} .stat .say{font-size:.94rem} .grid{grid-template-columns:1fr 1fr;gap:30px 16px} .grid.cols3{grid-template-columns:1fr 1fr} .adv{grid-template-columns:1fr;gap:0;padding:22px 0} .adv .ic{margin-bottom:12px} .adv .m{font-size:2rem;margin-bottom:10px} .adv .s{grid-column:1;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .why-grid,.notice-grid,.flow-list,.cert-row{grid-template-columns:1fr} .why-card,.notice-card,.flow-list div{border-right:none;padding-right:0;margin-right:0; border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:26px} .why-card:last-child,.notice-card:last-child,.flow-list div:last-child{border-bottom:none;margin-bottom:0} .ti-spec>div{padding-right:20px;margin-right:20px} .featrow .imgs.two{grid-template-columns:1fr} .featrow .imgs .tall{grid-row:auto} .form-row{grid-template-columns:1fr} .foot-top{flex-direction:column;gap:34px} .foot-cols{gap:40px} .contact-simple .ci{flex-direction:column;gap:8px} .contact-simple .ci .lab{width:auto} .crow{flex-direction:column;gap:7px} .crow .k{width:auto} .track-head .big{font-size:3rem} .catgrid{grid-template-columns:1fr 1fr} .tile-kitchen-head{grid-template-columns:1fr} .tile-kitchen-texture{max-width:190px} .tile-kitchen-controls{align-items:stretch} .stone-select{display:grid;gap:8px} .stone-chip{grid-template-columns:40px 128px;min-width:186px} .gate .half{padding:34px 22px} .gate-top{padding:22px} .lightbox .lb-nav{font-size:1.7rem;padding:8px 10px} }