/* ========================================================================== SAFIenS — Design C: "Live Control Center" dark ops-dashboard aesthetic: monitoring panels, pulse/status indicators, alert -> resolved framing, pipeline node lists, LED-style glowing numerals. ========================================================================== */ /* ========================================================================== THEME TOKENS — 기본값은 다크. 로 라이트 전환 ========================================================================== */ :root{ --bg:#0B0F14; --bg-alt:#0E141B; /* 섹션 교차 배경 */ --panel:#121820; --panel-raised:#19212B; --line:#232C37; --line-bright:#324152; /* BRAND(다크) — 어두운 배경에서 눈이 편한 야광 민트를 기본 축으로 쓰고, 그라데이션 끝단에서만 로고의 하늘/보랏빛 파랑으로 넘어간다 */ --brand:#2DD4BF; --brand-deep:#14B8A6; --brand-hover:#5EEAD4; --brand-tint:rgba(45,212,191,0.10); --brand-faint:rgba(45,212,191,0.05); --brand-b1:rgba(45,212,191,0.22); --brand-b2:rgba(45,212,191,0.30); --brand-b3:rgba(45,212,191,0.38); --brand-glow:rgba(45,212,191,0.35); --brand-glow-soft:rgba(45,212,191,0.12); --brand-dim:rgba(45,212,191,0.6); --brand-grad:linear-gradient(120deg,#2DD4BF 0%,#5AD9E8 46%,#9DB4FF 100%); --amber:#FBBF24; --amber-deep:#F59E0B; --amber-tint:rgba(251,191,36,0.10); --amber-b:rgba(251,191,36,0.30); --amber-dim:rgba(251,191,36,0.6); /* 구성도 핵심기능 강조 — 컬럼 제목(진한 단색)보다 반드시 '연하게'. 브랜드 그라데이션 끝단(#9DB4FF) 계열의 옅은 페리윙클 톤. */ --key-fill:rgba(150,175,255,0.30); --key-fill-hover:rgba(150,175,255,0.42); --key-ink:#CFDAFF; --key-line:rgba(157,180,255,0.58); --text-0:#F1F5F9; --text-1:#93A1B3; --text-2:#57616F; --on-brand:#04211D; --on-brand-dim:rgba(4,33,29,0.6); --header-bg:rgba(11,15,20,0.85); --shadow-lg:0 20px 50px rgba(0,0,0,0.35); --hud-opacity:0.35; /* 본문 글자를 키운 만큼 콘텐츠 폭도 함께 넓힌다. 한 줄에 담기는 글자 수를 예전과 비슷하게 유지하기 위한 값이다. */ --wrap:1360px; --wrap-pad:36px; --mono:'JetBrains Mono', monospace; --sans:'PretendardVariable','Pretendard', -apple-system, sans-serif; --radius:8px; } /* ---------- LIGHT THEME ---------- */ [data-theme="light"]{ --bg:#F5F7FC; --bg-alt:#EBEFF8; /* 섹션 교차 배경 */ --panel:#FFFFFF; --panel-raised:#EDF0F8; --line:#DDE2EE; --line-bright:#BFC7DA; /* BRAND — 밝은 배경에서도 읽히도록 같은 색상 계열을 진하게 */ --brand:#4B5FD9; --brand-deep:#3B4FC7; --brand-hover:#3B4FC7; --brand-tint:rgba(75,95,217,0.08); --brand-faint:rgba(75,95,217,0.045); --brand-b1:rgba(75,95,217,0.20); --brand-b2:rgba(75,95,217,0.28); --brand-b3:rgba(75,95,217,0.34); --brand-glow:rgba(75,95,217,0.22); --brand-glow-soft:rgba(75,95,217,0.10); --brand-dim:rgba(75,95,217,0.6); --brand-grad:linear-gradient(120deg,#2E9AD9 0%,#4B5FD9 52%,#7B4FD0 100%); --amber:#B45309; --amber-deep:#D97706; --amber-tint:rgba(217,119,6,0.08); --amber-b:rgba(217,119,6,0.28); --amber-dim:rgba(180,83,9,0.6); --key-fill:#C5CFF6; --key-fill-hover:#B3C0F1; --key-ink:#2B3B9B; --key-line:#A6B4EC; --text-0:#0F1730; --text-1:#4B5468; --text-2:#8590A5; --on-brand:#FFFFFF; --on-brand-dim:rgba(255,255,255,0.72); --header-bg:rgba(255,255,255,0.88); --shadow-lg:0 18px 44px rgba(15,23,42,0.10); --hud-opacity:0.5; } /* 테마 전환 시 부드럽게 */ .theming, .theming *{ transition:background-color .28s ease, border-color .28s ease, color .28s ease !important; } *{margin:0; padding:0; box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text-0); font-family:var(--sans); line-height:1.55; overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;} } section, header{ scroll-margin-top:78px; } /* 한글 줄바꿈을 문서 전체에 어절 단위로 적용합니다. 아래 p·li 규칙만으로는 제목과 각종 설명용 span 이 빠져서, 글자를 키우면 '사무실 / 로,' '설 / 정' 처럼 어중간하게 끊겼습니다. (영문에는 영향이 없고, 칸보다 긴 어절은 break-word 가 처리합니다.) */ body{word-break:keep-all; overflow-wrap:break-word;} h1, h2, h3, h4, h5, h6{text-wrap:balance;} a{color:inherit; text-decoration:none;} .nb{white-space:nowrap;} /* 한글은 어절 단위로만 끊고(word-break:keep-all), 마지막 줄에 한두 글자만 남는 자투리 줄바꿈을 막는다(text-wrap:pretty). 컨테이너보다 긴 어절만 예외적으로 분리. */ p, li, .bd-list span, .fc-v, .ug-note, .eg-d, .fb-n, .uc-n, .mk-float, .cp-v, .cc-v, .cr-val, .cr-hl, .sd-desc, .fx-v, .mf, .status-box li, .sol-lead{ word-break:keep-all; overflow-wrap:break-word; text-wrap:pretty; } .wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad); position:relative; z-index:1;} .mono{font-family:var(--mono);} /* faint HUD dot-grid backdrop */ .hud-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(var(--line-bright) 1px, transparent 1px); background-size:26px 26px; opacity:var(--hud-opacity); mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 20%, transparent 80%); } .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:15.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; } .pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); flex-shrink:0; box-shadow:0 0 0 0 var(--brand-dim); animation:pulseRing 2.2s ease-out infinite; } @keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 var(--brand-glow); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } /* ---------- header ---------- */ header{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav{display:flex; align-items:center; justify-content:space-between; height:68px;} .logo{display:flex; align-items:center; gap:11px; color:var(--text-0); min-width:0;} .logo-img{display:block; height:30px; width:auto; flex-shrink:0;} /* 로고 옆 한글명 — 얇게 페이드되는 구분선 + 사피엔스 + 그 아래 작은 설명 */ .logo-div{ width:1px; height:30px; flex-shrink:0; border-radius:1px; background:linear-gradient(180deg, transparent 0%, var(--line) 28%, var(--line) 72%, transparent 100%); } .logo-ko{ display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; font-family:var(--sans); } .logo-ko b{ font-size:17px; font-weight:700; line-height:1.25; color:var(--text-0); letter-spacing:0.005em; white-space:nowrap; } .logo-ko em{ font-style:normal; font-size:14.5px; font-weight:500; line-height:1.3; color:var(--text-2); letter-spacing:-0.012em; white-space:nowrap; } /* 테마별 로고 교체 — 다크: logo_ko_white.png / 라이트: logo_ko_grey.png 두 파일은 724×212 동일 규격이므로 .logo-img 의 height 26px 를 그대로 상속받는다. */ .logo-light{display:none;} [data-theme="light"] .logo-dark{display:none;} [data-theme="light"] .logo-light{display:block;} .nav-menu{display:flex; gap:22px;} .nav-menu button{ background:none; border:none; cursor:pointer; color:var(--text-1); font-family:var(--sans); font-size:16.5px; font-weight:500; padding:6px 0; position:relative; transition:color .2s; white-space:nowrap; } .nav-menu button::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--brand); transition:width .22s;} .nav-menu button:hover{color:var(--text-0);} .nav-menu button:hover::after{width:100%;} .nav-cta{ font-family:var(--sans); font-weight:700; font-size:16.5px; color:var(--on-brand); background:var(--brand-grad); background-size:180% 100%; background-position:0 0; border:none; border-radius:6px; padding:9px 18px; cursor:pointer; transition:background-position .35s ease, box-shadow .2s; box-shadow:0 0 0 0 var(--brand-glow); } .nav-cta:hover{ background-position:100% 0; box-shadow:0 0 20px var(--brand-glow); } /* ---------- theme toggle ---------- */ .nav-right{display:flex; align-items:center; gap:10px;} .theme-toggle{ width:40px; height:40px; flex-shrink:0; border-radius:50%; cursor:pointer; background:var(--panel); border:1px solid var(--line-bright); color:var(--text-1); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; transition:all .2s; padding:0; } .theme-toggle:hover{border-color:var(--brand); color:var(--brand); box-shadow:0 0 14px var(--brand-glow-soft);} .theme-toggle:focus-visible{outline:1px solid var(--brand); outline-offset:2px;} .theme-toggle .ti{display:none;} [data-theme="dark"] .theme-toggle .ti-sun{display:block;} [data-theme="light"] .theme-toggle .ti-moon{display:block;} .theme-toggle svg{display:none;} [data-theme="dark"] .theme-toggle svg.ti-sun{display:block;} [data-theme="light"] .theme-toggle svg.ti-moon{display:block;} /* ---------- buttons ---------- */ .btn{ font-family:var(--sans); font-weight:700; font-size:17px; padding:14px 24px; border-radius:7px; display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; cursor:pointer; transition:all .2s; } .btn-primary{ background:var(--brand-grad); background-size:180% 100%; background-position:0 0; color:var(--on-brand); transition:background-position .35s ease, box-shadow .2s, transform .2s; } .btn-primary:hover{background-position:100% 0; box-shadow:0 0 24px var(--brand-glow); transform:translateY(-1px);} .btn-ghost{border-color:var(--line-bright); color:var(--text-1); background:var(--panel);} .btn-ghost:hover{border-color:var(--brand); color:var(--brand);} /* ---------- hero ---------- */ .hero{padding:64px 0 56px; position:relative;} .hero .wrap{display:grid; grid-template-columns:1.05fr 0.85fr; gap:56px; align-items:center;} .hero-copy h1{font-size:clamp(37px,4.5vw,58px); font-weight:800; line-height:1.24; letter-spacing:-0.015em; color:var(--text-0); margin-bottom:22px;} .hero-copy h1 .hl{ background:var(--brand-grad); background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .hero-copy p{font-size:18px; color:var(--text-1); max-width:580px; line-height:1.7; margin-bottom:32px;} .hero-copy p b{color:var(--text-0);} .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px;} .hero-tags{display:flex; gap:18px; flex-wrap:wrap;} .hero-tags span{font-family:var(--mono); font-size:15px; color:var(--text-2); display:flex; align-items:center; gap:7px;} .hero-tags span::before{content:'#'; color:var(--line-bright);} /* ---------- 프로그램 저작권 등록번호 (해시태그 라인) ---------- hero-tags 와 같은 '#' 톤을 유지하되, 등록번호만 브랜드색으로 살짝 강조해 한 줄 높이(약 26px)로 끝나게 한다. */ .hero-cert{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:4px 10px 4px 8px; border-radius:6px; border:1px solid var(--brand-b2); background:var(--brand-faint); font-family:var(--mono); font-size:15px; line-height:1.5; } .hc-hash{color:var(--brand-dim); font-weight:700;} .hc-label{ font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--text-1); letter-spacing:0.01em; white-space:nowrap; } .hc-no{ font-weight:700; color:var(--brand); letter-spacing:0.03em; white-space:nowrap; text-shadow:0 0 14px var(--brand-glow-soft); } .hc-org{ font-size:13px; font-weight:600; letter-spacing:0.03em; color:var(--text-2); padding-left:7px; border-left:1px solid var(--line-bright); white-space:nowrap; } @media (max-width:520px), (max-device-width:600px){ .hero-cert{flex-wrap:wrap; gap:5px 7px; padding:5px 10px;} .hc-org{padding-left:0; border-left:0;} } /* console panel (hero graphic) */ .console{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 20px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .console::before{ content:''; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(90deg, transparent, var(--brand-tint), transparent); animation:scan 4.5s linear infinite; } @keyframes scan{ to{ left:140%; } } .console-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);} .console-head .ch-label{font-family:var(--mono); font-size:14.5px; color:var(--text-2); letter-spacing:0.08em;} .console-head .ch-live{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:14.5px; color:var(--brand); letter-spacing:0.06em;} .console-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line);} .console-row:last-of-type{border-bottom:none;} .console-row .cr-name{display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; color:var(--text-0); flex-shrink:0;} .console-row .cr-name .pulse-dot{width:6px; height:6px;} .console-row .cr-val{font-family:var(--mono); font-size:15px; color:var(--text-1); text-align:right;} /* 두 줄짜리 값 (ERP) */ .console-row.multi{align-items:flex-start;} .console-row.multi .cr-name{padding-top:2px;} .cr-val.cr-multi{display:flex; flex-direction:column; align-items:flex-end; gap:7px;} /* 값 안에서 강조되는 항목 — 야광 느낌 */ .cr-hl{ color:var(--brand); font-weight:700; background:var(--brand-tint); border:1px solid var(--brand-b2); border-radius:4px; padding:1px 6px; margin-right:1px; text-shadow:0 0 10px var(--brand-glow); box-shadow:0 0 12px var(--brand-glow-soft); } .console-core{ margin-top:16px; padding:16px 18px; background:var(--brand-tint); border:1px solid var(--brand-b3); border-radius:6px; display:flex; align-items:center; justify-content:space-between; } .console-core .cc-name{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--brand);} .console-core .cc-sub{font-family:var(--mono); font-size:14px; color:var(--text-2); margin-top:2px;} .console-core .cc-stat{font-family:var(--mono); font-size:14.5px; color:var(--brand);} /* ---------- section shell ---------- */ section{position:relative; padding:88px 0;} /* 콘텐츠마다 배경을 미세하게 교차시켜 구획을 나눈다 */ section + section{border-top:1px solid var(--line);} section:nth-of-type(even){background:var(--bg-alt);} footer{border-top:1px solid var(--line);} .section-head{max-width:920px; margin-bottom:52px;} .section-head h2{font-size:clamp(30px,3.1vw,41px); font-weight:800; letter-spacing:-0.015em; margin-bottom:14px; color:var(--text-0);} .section-head p{color:var(--text-1); font-size:18.5px; line-height:1.65; text-wrap:pretty;} #companyHead{max-width:810px;} .nowrap-fit{white-space:nowrap; font-size:clamp(16px,3.8vw,32px) !important; letter-spacing:-0.02em;} /* ---------- solutions: tab index ---------- */ .sol-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; } .sol-tab{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:var(--sans); font-size:16.5px; font-weight:600; color:var(--text-1); background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:9px 18px 9px 13px; transition:all .18s; white-space:nowrap; position:relative; } .sol-tab i{ font-family:var(--mono); font-style:normal; font-size:14.5px; font-weight:700; letter-spacing:0.04em; color:var(--text-2); transition:color .18s; } .sol-tab:hover{border-color:var(--line-bright); color:var(--text-0); background:var(--panel-raised);} .sol-tab:hover i{color:var(--text-1);} .sol-tab:focus-visible{outline:1px solid var(--brand); outline-offset:2px;} .sol-tab.active{ background:var(--brand-grad); border-color:transparent; color:var(--on-brand); box-shadow:0 0 22px var(--brand-glow); } .sol-tab.active i{color:var(--on-brand-dim);} /* ---------- alert / resolved status panels ---------- */ .split{display:grid; grid-template-columns:0.95fr 1.05fr; gap:56px; align-items:start;} .split.rev{grid-template-columns:1.05fr 0.95fr;} .split.rev .split-media{order:2;} .status-box{border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; border:1px solid var(--line);} .status-box.alert{background:var(--amber-tint); border-color:var(--amber-b);} .status-box.resolved{background:var(--brand-tint); border-color:var(--brand-b2);} .status-head{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px;} .status-box.alert .status-head{color:var(--amber);} .status-box.resolved .status-head{color:var(--brand);} .status-head .st-title{font-family:var(--sans); font-weight:700; font-size:17.5px; text-transform:none; letter-spacing:0; color:var(--text-0); margin-left:4px;} .status-box ul{list-style:none;} .status-box li{ font-size:16.5px; color:var(--text-1); padding:8px 0; position:relative; padding-left:20px; line-height:1.65; /* 한글은 어절 단위로만 끊습니다(keep-all). text-wrap:pretty 는 마지막 줄을 맞추려고 앞 줄을 더 짧게 끊으므로 이 목록에서는 쓰지 않습니다. */ text-wrap:wrap; } .status-box.alert li::before{content:'▲'; position:absolute; left:0; top:9px; font-size:11.5px; color:var(--amber);} .status-box.resolved li::before{content:'✓'; position:absolute; left:0; color:var(--brand); font-family:var(--mono); font-weight:700;} /* ---------- pipeline (process nodes) ---------- */ .pipeline{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:8px 22px;} .pipe-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); position:relative;} .pipe-row:last-child{border-bottom:none;} .pipe-node{width:29px; height:29px; border-radius:50%; border:1.5px solid var(--line-bright); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:14.5px; color:var(--text-1); flex-shrink:0; background:var(--bg);} .pipe-row.hl .pipe-node{border-color:var(--brand); color:var(--brand); box-shadow:0 0 10px var(--brand-glow);} .pipe-text{flex:1; font-size:16.5px; font-weight:600; color:var(--text-0);} .pipe-tag{font-family:var(--mono); font-size:14px; color:var(--text-1); background:var(--panel-raised); border:1px solid var(--line); padding:3px 8px; border-radius:4px; flex-shrink:0;} .pipe-row.hl .pipe-tag{color:var(--brand); border-color:var(--brand-b3);} /* ---------- stats: LED readouts ---------- */ /* ---------- company ---------- */ .company-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);} .company-panel{background:var(--panel); padding:34px;} .panel-title{font-family:var(--mono); font-size:14.5px; color:var(--text-2); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px;} .info-row{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-size:16.5px;} .info-row:last-child{border:none;} .info-row .k{color:var(--text-2); font-family:var(--mono); font-size:14.5px;} .info-row .v{color:var(--text-0); font-weight:600; text-align:right;} .timeline-item{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--line);} .timeline-item:last-child{border:none;} .timeline-item .yr{font-family:var(--mono); font-size:15.5px; color:var(--brand); min-width:52px;} .timeline-item .tx{font-size:16.5px; color:var(--text-1); line-height:1.6;} /* ---------- contact ---------- */ .contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:1px; background:var(--line);} .contact-info{background:var(--panel); padding:34px; display:flex; flex-direction:column; justify-content:space-between;} .contact-info h3{font-size:22px; font-weight:700; margin-bottom:12px; color:var(--text-0);} .contact-info p{font-size:12.5px; color:var(--text-1); line-height:1.75; margin-bottom:26px;} /* 회사명 — 왼쪽 그라데이션 바 + 한/영 2단 로고 타입 */ .cp-name{position:relative; padding-left:16px; margin-bottom:22px;} .cp-name::before{ content:''; position:absolute; left:0; top:4px; bottom:5px; width:4px; border-radius:3px; background:var(--brand-grad); box-shadow:0 0 16px var(--brand-glow); } .cp-ko{ display:block; font-size:25.5px; font-weight:800; letter-spacing:-0.025em; line-height:1.3; color:var(--text-0); } .cp-en{ display:block; margin-top:8px; font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:0.16em; color:var(--brand); word-break:keep-all; } .cc-group{display:flex; flex-direction:column;} .cc-label{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:0.14em; color:var(--brand); } .contact-channel{ display:flex; align-items:center; gap:14px; padding:17px 0; border-top:1px solid var(--line); color:inherit; transition:border-color .18s ease; } .contact-channel:first-of-type{border-top:none;} .contact-channel .ic{ width:40px; height:40px; flex-shrink:0; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b2); box-shadow:0 0 14px var(--brand-glow-soft); transition:transform .18s ease, box-shadow .18s ease; } .contact-channel .ic svg{width:21px; height:21px;} .contact-channel .cc-k{font-family:var(--mono); font-size:14.5px; color:var(--text-2); letter-spacing:0.06em;} .contact-channel .cc-v{font-size:17.5px; font-weight:600; color:var(--text-0); margin-top:3px; transition:color .18s ease;} a.contact-channel:hover .cc-v{color:var(--brand);} a.contact-channel:hover .ic{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.22), 0 0 18px var(--brand-glow);} .contact-form{background:var(--panel); padding:34px;} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} .form-field{display:flex; flex-direction:column; gap:7px;} .form-field.full{grid-column:1/-1;} .form-field label{font-family:var(--mono); font-size:14.5px; color:var(--text-2); letter-spacing:0.04em;} .form-field input, .form-field textarea{ border:1px solid var(--line); background:var(--bg); border-radius:6px; padding:11px 13px; font-family:var(--sans); font-size:16.5px; color:var(--text-0); resize:vertical; transition:border-color .2s; } .form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--brand);} .form-field input::placeholder, .form-field textarea::placeholder{color:var(--text-2);} .consent{margin:2px 0 16px;} .consent-row{display:flex; align-items:flex-start; gap:10px; cursor:pointer;} .consent-row input[type="checkbox"]{width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--brand); cursor:pointer;} .consent-row .consent-text{font-size:16px; color:var(--text-1); line-height:1.6; word-break:keep-all;} .consent-text b{color:var(--text-0); font-weight:700;} /* 수집 항목 · 이용 목적 — 평소엔 접어두고 필요할 때 펼친다 (JS 없이
) */ .consent-detail{margin:7px 0 0 28px;} .consent-detail > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600; color:var(--text-2); padding:3px 0; transition:color .16s ease; } .consent-detail > summary::-webkit-details-marker{display:none;} .consent-detail > summary::before{ content:'+'; display:inline-flex; align-items:center; justify-content:center; width:11px; flex-shrink:0; font-family:var(--mono); font-size:16.5px; font-weight:700; line-height:1; transition:color .16s ease; } .consent-detail[open] > summary::before{content:'\2212';} .consent-detail > summary:hover{color:var(--brand);} .consent-detail > summary:hover::before{color:var(--brand);} .consent-detail > summary:focus-visible{outline:1px solid var(--brand); outline-offset:3px; border-radius:3px;} .cd-body{ margin-top:8px; padding:13px 15px; border-radius:6px; background:var(--bg); border:1px solid var(--line); } .cd-list{display:flex; flex-direction:column; gap:8px;} .cd-list > div{display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:start;} .cd-list dt{font-size:15px; font-weight:700; color:var(--text-0); line-height:1.65;} .cd-list dd{font-size:15px; line-height:1.65; color:var(--text-1); word-break:keep-all;} .cd-note{ margin-top:11px; padding-top:10px; border-top:1px dashed var(--line); font-size:14.5px; line-height:1.7; color:var(--text-2); word-break:keep-all; } .cd-note a{color:var(--text-1); border-bottom:1px solid var(--line-bright);} .cd-note a:hover{color:var(--brand); border-color:var(--brand);} @media (max-width:520px), (max-device-width:600px){ .consent-detail{margin-left:0;} .cd-list > div{grid-template-columns:1fr; gap:2px;} } .btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none !important; transform:none !important;} .form-submit{width:100%; justify-content:center;} .form-note{font-size:15px; color:var(--text-2); margin-top:10px; text-align:center;} /* ---------- cta band ---------- */ /* ---------- footer ---------- */ footer{padding:48px 0 32px;} .footer-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,0.9fr) minmax(0,1.3fr); gap:44px; align-items:start; padding-bottom:34px; border-bottom:1px solid var(--line); } .footer-brand .logo{margin-bottom:18px;} .footer-brand p{color:var(--text-2); font-size:16px; line-height:1.8;} .footer-contact{font-family:var(--mono); font-size:16.5px; color:var(--text-1); line-height:1.85;} .footer-contact b{color:var(--text-0);} .footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:15px; color:var(--text-2); font-family:var(--mono); flex-wrap:wrap; gap:10px;} /* ---------- back to top ---------- */ .to-top{ position:fixed; right:24px; bottom:24px; z-index:60; width:46px; height:46px; border-radius:50%; background:var(--brand-grad); color:var(--on-brand); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; box-shadow:0 4px 20px var(--brand-glow); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, transform .3s, visibility .3s; } .to-top.show{opacity:1; visibility:visible; transform:translateY(0);} .to-top:hover{filter:brightness(1.1);} /* ---------- reveal ---------- */ .reveal{opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);} .reveal.in{opacity:1; transform:translateY(0);} .sol-tab:nth-child(1){transition-delay:0s;} .sol-tab:nth-child(2){transition-delay:.05s;} .sol-tab:nth-child(3){transition-delay:.1s;} .sol-tab:nth-child(4){transition-delay:.15s;} .pipe-row:nth-child(1){transition-delay:0s;} .pipe-row:nth-child(2){transition-delay:.04s;} .pipe-row:nth-child(3){transition-delay:.08s;} .pipe-row:nth-child(4){transition-delay:.12s;} .company-panel:nth-child(2){transition-delay:.08s;} /* ---------- solution detail (inline accordion) ---------- */ .section-head p .hint{color:var(--brand); font-weight:600; font-size:17.5px;} .sol-stage{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel);} .sol-detail{display:none;} .sol-detail.active{display:block;} .sol-detail.swap{animation:panelIn .34s cubic-bezier(.16,.8,.3,1);} @keyframes panelIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} } .sd-head{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:22px 30px; border-bottom:1px solid var(--line); background:var(--panel-raised); } .sd-id{display:flex; flex-direction:column; gap:9px; flex-shrink:0;} .sd-idrow{display:flex; align-items:baseline; gap:12px;} .sd-num{font-family:var(--mono); font-size:15px; color:var(--brand); letter-spacing:0.08em;} .sd-title{font-size:22px; font-weight:800; color:var(--text-0); letter-spacing:-0.015em;} .sd-tags{display:flex; gap:6px; flex-wrap:wrap;} .sd-tags span{ font-family:var(--mono); font-size:14px; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b1); padding:3px 8px; border-radius:4px; } .sd-lead{flex:1; min-width:320px; font-size:16.5px; color:var(--text-1); line-height:1.65; border-left:2px solid var(--brand); padding-left:16px;} .sd-body{display:grid; grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr); gap:1px; background:var(--line); align-items:stretch;} .sd-col{background:var(--panel); padding:26px 24px; min-width:0;} .sd-col:last-child{display:flex; flex-direction:column; padding-left:20px; padding-right:20px;} .sd-col:last-child .flowfig{margin-bottom:0;} .sd-col .status-box{margin-bottom:16px;} .sd-col .status-box:last-child{margin-bottom:0;} .sd-col .status-box li{font-size:16.5px;} .sd-sub{ font-family:var(--mono); font-size:14.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2); margin:0 0 12px; padding-bottom:8px; border-bottom:1px dashed var(--line); } .sd-sub + .pipeline{margin-bottom:24px;} .pipeline.compact{padding:4px 18px; background:var(--bg);} .pipeline.compact .pipe-row{padding:11px 0; gap:13px;} .pipeline.compact .pipe-text{font-size:16px;} .pipeline.compact .pipe-node{width:26px; height:26px; font-size:14px;} .chiprow{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px;} .chiprow span{ font-size:15px; font-weight:500; color:var(--text-1); background:var(--bg); border:1px solid var(--line); padding:5px 10px; border-radius:4px; } .sd-note{ font-size:15.5px; color:var(--text-1); line-height:1.7; background:var(--brand-tint); border:1px solid var(--brand-b1); border-left:2px solid var(--brand); border-radius:5px; padding:12px 15px; } .sd-note b{color:var(--brand); font-family:var(--mono); font-size:14.5px; letter-spacing:0.06em; margin-right:3px;} /* ---------- architecture map ---------- */ .arch{display:grid; grid-template-columns:308px 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .arch-users{background:var(--panel); padding:16px 11px; display:flex; flex-direction:column; gap:11px;} .arch-panel-title{font-family:var(--mono); font-size:16px; color:var(--text-2); letter-spacing:0.08em;} /* 내부 / 외부 사용자 그룹 */ .ug{ flex:3 1 auto; display:flex; flex-direction:column; gap:8px; justify-content:space-between; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:11px 9px 12px; } .ug.ext{border-style:dashed; flex:2 1 auto;} .ug-note{ font-size:14.5px; line-height:1.55; color:var(--text-2); word-break:keep-all; padding-top:9px; border-top:1px dashed var(--line); margin-top:2px; } .ug-h{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:15.5px; font-weight:700; letter-spacing:0.06em; color:var(--text-2); } .ug-bar{width:3px; height:13px; border-radius:2px; background:var(--brand); flex-shrink:0;} .ug.ext .ug-bar{background:var(--text-2);} .user-cell{ /* flex-basis:0 → 같은 그룹 안 카드 높이가 균등해집니다. (auto 였을 때는 두 줄짜리 '일용직·사업소득자' 카드만 18px 더 컸습니다) min-height:auto 가 기본이라 내용보다 작아지지는 않습니다. */ flex:1 1 0; max-height:140px; display:flex; align-items:center; gap:11px; padding:11px 11px; background:var(--panel); border:1px solid var(--line); border-radius:6px; transition:border-color .18s ease, background .18s ease; } .user-cell:hover{border-color:var(--ic-b); background:var(--panel-raised);} .uc-ic{ width:44px; height:44px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ic); border:1px solid var(--ic-b); background:radial-gradient(120% 120% at 30% 0%, var(--ic-b), transparent 68%), var(--ic-t); box-shadow:0 0 18px var(--ic-t); } .uc-ic svg{width:25px; height:25px;} .uc-n{font-size:17.5px; font-weight:700; color:var(--text-0); line-height:1.4;} .uc-d{font-family:var(--mono); font-size:15px; color:var(--text-2); margin-top:3px;} .arch-arrow{ font-family:var(--mono); font-size:14px; letter-spacing:0.08em; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b2); border-radius:5px; padding:9px 10px; text-align:center; } .arch-core{background:var(--panel); padding:0;} .arch-core-head{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:0.06em; color:var(--brand); background:var(--brand-tint); border-bottom:1px solid var(--brand-b2); padding:13px 18px; } .arch-cols{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--line);} .arch-col{background:var(--panel); padding:14px 13px 16px;} .arch-col.hl{background:var(--brand-faint);} .ac-head{ font-size:16.5px; font-weight:700; color:var(--on-brand); background:var(--brand-deep); border-radius:4px; padding:5px 8px; text-align:center; margin-bottom:10px; letter-spacing:-0.01em; } .arch-col.hl .ac-head{background:var(--amber-deep);} .arch-col ul{list-style:none;} .arch-col li{ font-size:14.5px; color:var(--text-1); line-height:1.45; padding:5px 7px; margin-bottom:2px; background:var(--bg); border:1px solid var(--line); border-radius:3px; word-break:keep-all; } .arch-col li:hover{border-color:var(--line-bright); color:var(--text-0);} /* 핵심기능 항목 하이라이팅 — 컬럼 제목보다 연한 톤으로 얹는다 */ .arch-col li.key{ color:var(--key-ink); font-weight:700; background:var(--key-fill); border-color:var(--key-line); box-shadow:inset 2px 0 0 var(--key-ink); transition:background .18s ease, border-color .18s ease; } .arch-col li.key:hover{background:var(--key-fill-hover); border-color:var(--key-ink); color:var(--key-ink);} /* 하이라이트 컬럼(모바일 앱)은 원래대로 앰버 톤 유지 */ .arch-col.hl li.key{ color:var(--amber); background:var(--amber-tint); border-color:var(--amber-b); box-shadow:inset 2px 0 0 var(--amber); } .arch-col.hl li.key:hover{background:var(--amber-tint); border-color:var(--amber); color:var(--amber);} .ach-legend{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:16.5px; font-weight:600; letter-spacing:0; color:var(--text-1); } .ach-legend i{ width:10px; height:10px; border-radius:2px; flex-shrink:0; background:var(--key-fill); border:1px solid var(--key-line); box-shadow:inset 2px 0 0 var(--key-ink); } .arch-egov{margin-top:1px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel);} .egov-head{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:15.5px; font-weight:700; letter-spacing:0.08em; color:var(--text-0); padding:13px 18px; border-bottom:1px solid var(--line); background:var(--panel-raised); } .egov-head em{ font-style:normal; font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:0; color:var(--text-2); padding-left:11px; border-left:1px solid var(--line-bright); } .egov-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);} .egov-cell{ background:var(--panel); padding:19px 18px; display:flex; align-items:flex-start; gap:14px; transition:background .2s; } .egov-cell:hover{background:var(--panel-raised);} .eg-ic{ width:48px; height:48px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ic); border:1px solid var(--ic-b); background:radial-gradient(120% 120% at 30% 0%, var(--ic-b), transparent 68%), var(--ic-t); box-shadow:0 0 20px var(--ic-t); transition:transform .2s ease, box-shadow .2s ease; } .eg-ic svg{width:26px; height:26px;} .egov-cell:hover .eg-ic{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.25), 0 0 22px var(--ic-b);} .eg-t{min-width:0;} .eg-n{font-size:16.5px; font-weight:700; color:var(--text-0); margin-bottom:4px; word-break:keep-all;} .eg-d{font-size:15px; color:var(--text-2); line-height:1.55; word-break:keep-all;} /* 아이콘 색상 팔레트 (다크) */ .c-mint {--ic:#2DD4BF; --ic-t:rgba(45,212,191,0.13); --ic-b:rgba(45,212,191,0.34);} .c-cyan {--ic:#38BDF8; --ic-t:rgba(56,189,248,0.13); --ic-b:rgba(56,189,248,0.34);} .c-blue {--ic:#8FA7FF; --ic-t:rgba(143,167,255,0.14); --ic-b:rgba(143,167,255,0.36);} .c-violet{--ic:#C084FC; --ic-t:rgba(192,132,252,0.14); --ic-b:rgba(192,132,252,0.36);} .c-amber {--ic:#FBBF24; --ic-t:rgba(251,191,36,0.13); --ic-b:rgba(251,191,36,0.34);} .c-rose {--ic:#FB7185; --ic-t:rgba(251,113,133,0.13); --ic-b:rgba(251,113,133,0.34);} .c-lime {--ic:#A3E635; --ic-t:rgba(163,230,53,0.13); --ic-b:rgba(163,230,53,0.34);} .c-sky {--ic:#22D3EE; --ic-t:rgba(34,211,238,0.13); --ic-b:rgba(34,211,238,0.34);} /* 아이콘 색상 팔레트 (라이트) */ [data-theme="light"] .c-mint {--ic:#0D9488; --ic-t:rgba(13,148,136,0.10); --ic-b:rgba(13,148,136,0.30);} [data-theme="light"] .c-cyan {--ic:#0284C7; --ic-t:rgba(2,132,199,0.10); --ic-b:rgba(2,132,199,0.30);} [data-theme="light"] .c-blue {--ic:#4B5FD9; --ic-t:rgba(75,95,217,0.10); --ic-b:rgba(75,95,217,0.30);} [data-theme="light"] .c-violet{--ic:#7C3AED; --ic-t:rgba(124,58,237,0.10); --ic-b:rgba(124,58,237,0.30);} [data-theme="light"] .c-amber {--ic:#B45309; --ic-t:rgba(180,83,9,0.10); --ic-b:rgba(180,83,9,0.30);} [data-theme="light"] .c-rose {--ic:#E11D48; --ic-t:rgba(225,29,72,0.10); --ic-b:rgba(225,29,72,0.30);} [data-theme="light"] .c-lime {--ic:#4D7C0F; --ic-t:rgba(77,124,15,0.10); --ic-b:rgba(77,124,15,0.30);} [data-theme="light"] .c-sky {--ic:#0891B2; --ic-t:rgba(8,145,178,0.10); --ic-b:rgba(8,145,178,0.30);} /* ---------- function matrix ---------- */ .fx{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--line);} .fx-group{display:grid; grid-template-columns:148px 1fr; gap:1px; background:var(--line); margin-bottom:1px;} .fx-group:last-child{margin-bottom:0;} .fx-cat{ background:var(--panel-raised); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px 12px; text-align:center; } .fx-cat span{font-size:17px; font-weight:800; color:var(--text-0); letter-spacing:-0.01em;} .fx-cat em{font-family:var(--mono); font-size:13px; font-style:normal; letter-spacing:0.1em; color:var(--text-2);} .fx-cat.brand{background:var(--brand-tint);} .fx-cat.brand span{color:var(--brand);} .fx-cat.brand em{color:var(--brand-dim);} .fx-cat.amber{background:var(--amber-tint);} .fx-cat.amber span{color:var(--amber);} .fx-cat.amber em{color:var(--amber-dim);} .fx-rows{background:var(--line); display:flex; flex-direction:column; gap:1px;} .fx-row{display:grid; grid-template-columns:126px 1fr; gap:16px; background:var(--panel); padding:13px 20px; align-items:start; transition:background .2s;} .fx-row:hover{background:var(--panel-raised);} .fx-k{font-size:16px; font-weight:700; color:var(--brand); font-family:var(--sans); letter-spacing:0.02em;} .fx-v{font-size:16px; color:var(--text-1); line-height:1.65; word-break:keep-all;} /* ---------- solution spec ---------- */ /* ---------- key features (24) ---------- */ .feat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;} .feat{display:flex; gap:14px; background:var(--panel); padding:16px 20px; font-size:16px; color:var(--text-1); line-height:1.62; transition:background .2s;} .feat:hover{background:var(--panel-raised);} .feat b{color:var(--text-0); font-weight:700;} .feat .fn{ font-family:var(--mono); font-size:14.5px; font-weight:700; color:var(--brand); flex-shrink:0; width:26px; height:26px; border:1px solid var(--brand-b3); border-radius:4px; display:flex; align-items:center; justify-content:center; background:var(--brand-tint); margin-top:1px; } /* ---------- responsive ---------- */ @media (max-width:1400px){ .nav-menu{gap:18px;} } @media (max-width:1300px){ header .logo-ko em{display:none;} /* 좁아지면 설명문구부터 접는다 */ } @media (max-width:1200px){ header .logo-div, header .logo-ko{display:none;} /* 메뉴와 겹치지 않도록 헤더에서만 숨김 */ } @media (max-width:1240px){ .arch-cols{grid-template-columns:repeat(4,minmax(0,1fr));} .nav-menu{gap:16px;} .nav-menu button{font-size:15.5px;} } /* 메뉴 글자를 키운 만큼, 햄버거로 넘어가기 직전 구간에서 헤더가 넘치지 않도록 한 단계를 더 둔다. */ @media (max-width:1040px){ .nav-menu{gap:12px;} .nav-menu button{font-size:15px;} .nav-cta{font-size:15px; padding:9px 14px;} .nav-right{gap:8px;} } @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .nav-menu{display:none;} .hero .wrap{grid-template-columns:1fr; gap:44px;} .split, .split.rev{grid-template-columns:1fr; gap:32px;} .split.rev .split-media{order:0;} .company-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .sd-body{grid-template-columns:minmax(0,1fr);} .sd-id{flex:1 1 auto;} .sd-lead{flex:0 0 100%; min-width:0; order:3; border-left:none; padding-left:0; padding-top:14px; border-top:1px dashed var(--line);} .arch{grid-template-columns:1fr;} .arch-users{flex-direction:row; flex-wrap:wrap; align-items:stretch;} .arch-panel-title{flex-basis:100%;} .ug{flex:1 1 300px; flex-direction:row; flex-wrap:wrap;} .ug-h{flex-basis:100%;} .user-cell{flex:1 1 190px;} .arch-arrow{flex-basis:100%;} .arch-cols{grid-template-columns:repeat(3,minmax(0,1fr));} .egov-grid{grid-template-columns:1fr 1fr;} .feat-grid{grid-template-columns:1fr;} } @media (max-width:600px), (max-device-width:600px){ .wrap{--wrap-pad:20px;} .cp-ko{font-size:21.5px;} .cp-en{letter-spacing:0.12em;} .footer-bottom{flex-direction:column;} .sd-head{padding:18px 20px; gap:14px;} .sol-tabs{flex-wrap:nowrap; overflow-x:auto; margin:0 -20px 20px; padding:0 20px 6px; scrollbar-width:none;} .sol-tabs::-webkit-scrollbar{display:none;} .sol-tab{font-size:16px; padding:8px 15px 8px 11px;} .sd-col{padding:22px 20px;} .sd-title{font-size:18.5px;} .arch-cols{grid-template-columns:repeat(2,minmax(0,1fr));} .egov-grid{grid-template-columns:1fr;} .fx-group{grid-template-columns:1fr;} .fx-cat{flex-direction:row; gap:10px; padding:12px; justify-content:flex-start;} .fx-row{grid-template-columns:1fr; gap:6px; padding:13px 16px;} .pipeline.compact{padding:4px 14px;} } /* ========================================================================== LIGHT THEME — 개별 보정 ========================================================================== */ [data-theme="light"] .hud-bg{ background-image:radial-gradient(var(--line-bright) 1px, transparent 1px); mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 10%, transparent 70%); } [data-theme="light"] .console{box-shadow:var(--shadow-lg);} [data-theme="light"] .pipe-node{background:var(--panel);} [data-theme="light"] .pipeline.compact{background:var(--panel-raised);} [data-theme="light"] .chiprow span{background:var(--panel-raised);} [data-theme="light"] .arch-col li:not(.key){background:var(--panel-raised);} [data-theme="light"] .form-field input, [data-theme="light"] .form-field textarea{background:var(--panel-raised);} [data-theme="light"] .sol-tab.active{box-shadow:0 4px 14px var(--brand-glow);} [data-theme="light"] header{box-shadow:0 1px 0 var(--line);} [data-theme="light"] .status-box.alert li::before{color:var(--amber-deep);} /* ========================================================================== FLOW DIAGRAM (SVG) — 처리 프로세스 도식 ========================================================================== */ .flowsvg{display:block; width:100%; height:auto; font-family:inherit; overflow:visible;} .flowsvg text{dominant-baseline:auto;} .fs-steptxt{fill:var(--text-0); font-size:14.5px; font-weight:600;} .fs-step rect{fill:var(--panel-raised); stroke:var(--brand-b2); stroke-width:1.2;} .fs-step .fs-num-bg{fill:var(--brand);} .fs-step .fs-num{fill:var(--on-brand); font-family:var(--mono); font-size:11px; font-weight:700;} .fs-step.amber rect{stroke:var(--amber-b); background:none;} .fs-step.amber .fs-num-bg{fill:var(--amber);} .fs-step.amber .fs-num{fill:#2A1D00;} .fs-item rect{fill:var(--bg); stroke:var(--line-bright); stroke-width:1;} .fs-itemtxt{fill:var(--text-0); font-size:13px; font-weight:500;} .fs-item.dia rect{fill:var(--amber-tint); stroke:var(--amber-b);} .fs-item.dia .fs-itemtxt{fill:var(--amber);} .fs-cyl{fill:var(--panel-raised); stroke:var(--line-bright); stroke-width:1;} .fs-cyltop{fill:var(--bg); stroke:var(--line-bright); stroke-width:1;} .fs-storetxt{fill:var(--text-1); font-size:12.5px; font-weight:600;} .fs-doc rect{fill:none; stroke:var(--line-bright); stroke-width:1; stroke-dasharray:4 4;} .fs-doctxt{fill:var(--text-1); font-size:12px;} .fs-doc.hl rect{fill:var(--amber-tint); stroke:var(--amber-b); stroke-dasharray:none;} .fs-doc.hl .fs-doctxt{fill:var(--amber); font-weight:700;} .fs-sys rect{fill:var(--brand-tint); stroke:var(--brand-b3); stroke-width:1.2;} .fs-systxt{fill:var(--brand); font-size:13px; font-weight:700;} .fs-bub rect{fill:var(--brand-faint); stroke:var(--line); stroke-width:1;} .fs-bubtxt{fill:var(--text-1); font-size:11.5px;} .fs-chip rect{fill:var(--amber);} .fs-chiptxt{fill:#2A1D00; font-size:12.5px; font-weight:700;} .fs-note{fill:var(--text-2); font-size:11.5px;} .fs-blt{fill:var(--text-1); font-size:12px;} .fs-actor circle{fill:var(--panel-raised); stroke:var(--brand-b2); stroke-width:1.2;} .fs-actorglyph{fill:var(--brand);} .fs-actortxt{fill:var(--text-1); font-size:11.5px; font-weight:600;} .fs-group rect{fill:none; stroke:var(--line-bright); stroke-width:1; stroke-dasharray:6 5;} .fs-group.hl rect{stroke:var(--brand-b3);} .fs-group.amber rect{stroke:var(--amber-b);} .fs-grouptxt{fill:var(--text-2); font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em;} .fs-edge{fill:none; stroke:var(--line-bright); stroke-width:1.4; stroke-linecap:round;} .fs-edge.hl{stroke:var(--brand-dim); stroke-width:1.6;} .fs-edge.thin{stroke-width:1; opacity:0.55;} .fs-edge.soft{opacity:0.4; stroke-dasharray:3 4;} .fs-arrow{fill:var(--text-2);} .fs-div line{stroke:var(--line); stroke-width:1;} .fs-div rect{fill:var(--bg); stroke:var(--line); stroke-width:1;} .fs-divtxt{fill:var(--text-1); font-size:11.5px; font-weight:700;} .fs-mini rect{fill:var(--bg); stroke:var(--line-bright);} .fs-mini-l{fill:none; stroke:var(--brand); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;} .fs-mini-d{fill:var(--amber);} .fs-pdf rect{fill:var(--amber-tint); stroke:var(--amber-b);} .fs-pdftxt{fill:var(--amber); font-size:15px; font-weight:800; font-family:var(--mono);} /* ---------- 도식 컨테이너 ---------- */ .flowfig{ position:relative; margin:0 0 22px; padding:18px 10px 10px; display:flex; flex-direction:column; justify-content:center; /* 칸 높이가 남으면 도식 액자가 그만큼 늘어나고 그림은 가운데에 놓입니다. (예전에는 액자 아래가 빈 배경으로 남았습니다) */ flex:1 1 auto; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); } .flowfig .flowsvg{cursor:zoom-in;} .sd-col:last-child .flowfig{margin-bottom:0;} .sd-col > .chiprow:last-of-type{margin-bottom:0;} .sd-col .sd-note{margin-top:auto;} .flow-zoom{ position:relative; z-index:2; align-self:flex-end; margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:14.5px; letter-spacing:0.05em; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b2); padding:9px 16px; border-radius:999px; cursor:pointer; transition:background .18s ease, color .18s ease, transform .18s ease; } .flow-zoom:hover{background:var(--brand); color:var(--on-brand); transform:translateY(-1px);} .flow-zoom:focus-visible{outline:2px solid var(--brand-hover); outline-offset:3px;} .sd-sub + .flowfig{margin-top:0;} /* 좁은 화면에서는 도식이 320px 안쪽으로 눌려 글자가 5px 수준까지 작아집니다. 최소 폭을 주고 가로로 넘기게 해서 '크게 보기' 없이도 읽히도록 합니다. */ @media (max-width:820px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .flowfig{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;} .flowfig .flowsvg{min-width:680px;} .flowfig .flow-zoom{align-self:flex-start; position:sticky; left:0;} } /* ---------- lightbox ---------- */ .lightbox{ position:fixed; inset:0; z-index:300; display:none; background:rgba(6,10,14,0.94); backdrop-filter:blur(8px); padding:56px 32px 64px; overflow:auto; align-items:center; justify-content:center; } [data-theme="light"] .lightbox{background:rgba(226,232,240,0.94);} .lightbox.open{display:flex;} .lb-stage{display:flex; align-items:center; justify-content:center; min-width:100%; min-height:100%;} .lb-svg{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px 24px; box-shadow:0 30px 90px rgba(0,0,0,0.5); width:min(1300px, 92vw); cursor:zoom-in; } .lb-svg .flowsvg{width:100%; height:auto;} .lightbox.zoomed{align-items:flex-start; justify-content:flex-start;} .lightbox.zoomed .lb-stage{min-width:0; min-height:0;} .lightbox.zoomed .lb-svg{width:1760px; cursor:zoom-out;} .lb-close{ position:fixed; top:20px; right:24px; z-index:2; width:40px; height:40px; border-radius:50%; cursor:pointer; background:var(--panel-raised); color:var(--text-0); border:1px solid var(--line-bright); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; } .lb-close:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand);} .lb-cap{ position:fixed; left:0; right:0; bottom:20px; text-align:center; font-family:var(--mono); font-size:15px; letter-spacing:0.07em; color:var(--text-1); pointer-events:none; } .lb-cap::after{content:" — 클릭하면 확대 / ESC 닫기"; color:var(--text-2);} @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .flowfig{padding:16px 12px 10px;} .lightbox{padding:52px 12px 56px;} .lightbox.zoomed .lb-svg{width:1320px;} } /* ========================================================================== MODULE MATRIX — 주요기능 (카드 그리드) ========================================================================== */ .mx{display:flex; flex-direction:column; gap:26px;} /* fr 은 기본 최소폭이 내용 크기라, 카드 제목이 길면 칸이 그만큼 밀려 넘칩니다. minmax(0,…) 로 최소폭을 풀어 컨테이너 안에 반드시 들어오게 합니다. */ .mx-pair{display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,3.15fr); gap:26px;} .mx-pair > .mx-tier{min-width:0;} .mx-top{min-width:0;} /* 카드 제목이 칸보다 길면 잘리지 않고 어절 단위로 줄바꿈되게 합니다 */ .mx-top h3{min-width:0; white-space:normal; word-break:keep-all; overflow-wrap:break-word; line-height:1.35;} .mx-top{align-items:flex-start;} .mx-n{margin-top:2px;} .mx-pick{min-width:0;} .mx-head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; padding:6px 2px 15px; margin-bottom:16px; border-bottom:1px solid var(--line); } .mx-label{display:flex; align-items:baseline; gap:9px;} .mx-dot{ width:7px; height:7px; border-radius:50%; align-self:center; background:var(--text-2); box-shadow:0 0 0 3px var(--panel); } .mx-label b{font-size:18px; font-weight:800; color:var(--text-0); letter-spacing:-0.01em;} .mx-label em{ font-family:var(--mono); font-style:normal; font-size:14px; letter-spacing:0.14em; color:var(--text-2); } .mx-desc{font-size:16px; color:var(--text-2); flex:1 1 auto;} .mx-count{font-family:var(--mono); font-size:14px; letter-spacing:0.1em; color:var(--text-2);} .mx-tier.base .mx-dot{background:var(--brand-dim);} .mx-tier.ext .mx-dot{background:var(--brand); box-shadow:0 0 0 3px var(--panel), 0 0 10px var(--brand-glow);} .mx-tier.ext .mx-label em{color:var(--brand-dim);} .mx-tier.link .mx-dot{background:var(--amber);} .mx-tier.link .mx-label em{color:var(--amber-dim);} .mx-grid{column-gap:10px; column-fill:balance;} .mx-tier.base .mx-grid{column-count:6;} .mx-tier.ext .mx-grid{column-count:4;} .mx-tier.add .mx-grid{column-count:2;} .mx-tier.link .mx-grid{column-count:3;} .mx-tier.link .mx-top h3{font-size:16.5px;} /* 제목이 길어 칸 폭에 맞춥니다 */ .mx-tier.link .mx-top{gap:6px;} .mx-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px 12px; margin:0 0 10px; position:relative; overflow:hidden; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; transition:border-color .18s ease, transform .18s ease, background .18s ease; } .mx-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-bright); transition:background .18s ease; } .mx-tier.ext .mx-card::before{background:var(--brand-b2);} .mx-tier.link .mx-card::before{background:var(--amber-b);} .mx-card:hover{border-color:var(--brand-b2); transform:translateY(-2px); background:var(--panel-raised);} .mx-card:hover::before{background:var(--brand);} .mx-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; padding-bottom:8px; border-bottom:1px solid var(--line); } .mx-top h3{ font-size:18.5px; font-weight:800; color:var(--text-0); letter-spacing:-0.02em; line-height:1.35; /* 칸보다 긴 제목은 잘리지 않고 어절 단위로 감깁니다. keep-all 이 걸려 있어 '·' 중간에서는 끊기지 않습니다. */ white-space:normal; word-break:keep-all; overflow-wrap:break-word; min-width:0; } /* 대분류 아이콘 — 배경/테두리 없이 글리프만. 박스를 두르면 옆의 체크박스와 체크박스 2개처럼 보여서 의미가 헷갈린다. */ .mx-ic{ flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--brand-dim); transition:color .18s ease; } .mx-ic svg{width:19px; height:19px;} .mx-card:hover .mx-ic{color:var(--brand);} .mx-tier.link .mx-ic{color:var(--amber-dim);} .mx-tier.link .mx-card:hover .mx-ic{color:var(--amber);} /* 기본모듈은 6단이라 카드가 좁다 — 제목 묶음만 한 단계 작게 */ .mx-tier.base .mx-top{gap:5px;} .mx-tier.base .mx-top h3{font-size:16px;} .mx-tier.base .mx-pick{gap:6px;} .mx-tier.base .mx-ic svg{width:17px; height:17px;} .mx-tier.base .mx-n{font-size:12.5px; padding:1px 5px;} .mx-n{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text-2); border:1px solid var(--line-bright); border-radius:999px; padding:2px 7px; flex-shrink:0; } .mx-card:hover .mx-n{color:var(--brand); border-color:var(--brand-b2);} .mx-f{display:flex; flex-wrap:wrap; gap:4px 5px;} .mx-f span{ font-size:14.5px; line-height:1.3; color:var(--text-1); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:4px 7px; white-space:normal; } .mx-tier.ext .mx-f span{border-color:var(--line);} @media (max-width:1240px){ .mx-tier.base .mx-grid{column-count:3;} .mx-tier.ext .mx-grid{column-count:3;} .mx-pair{grid-template-columns:1fr;} } @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .mx-tier.base .mx-grid, .mx-tier.ext .mx-grid{column-count:2;} .mx-tier.link .mx-grid{column-count:2;} .mx-head{flex-wrap:wrap; gap:6px 12px;} .mx-desc{order:3; flex-basis:100%;} } /* ========================================================================== 히어로 하단 — 솔루션 특징 스트립 ========================================================================== */ .hero .wrap.hl-strip{display:block; margin-top:32px;} /* .hero .wrap 의 2단 그리드 해제 */ /* ---------- 데이터 흐름 밴드 ---------- */ .flowband{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); } .flowband::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.55; background-image:radial-gradient(var(--line-bright) 1px, transparent 1px); background-size:22px 22px; mask-image:linear-gradient(180deg, transparent, black 60%); -webkit-mask-image:linear-gradient(180deg, transparent, black 60%); } .fb-head{ position:relative; display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-family:var(--mono); font-size:15.5px; font-weight:700; letter-spacing:0.08em; color:var(--brand); padding:13px 18px; border-bottom:1px solid var(--line); background:var(--brand-faint); } .fb-head em{ font-style:normal; font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:0; color:var(--text-1); padding-left:11px; border-left:1px solid var(--line-bright); word-break:keep-all; } .fb-count{ margin-left:auto; font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:0.12em; color:var(--text-2); } .fb-track{ position:relative; display:grid; align-items:start; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; padding:24px 22px 26px; } /* ---------- 전 모듈 공통 핵심 그리드 (히어로 하단 밴드) ---------- */ .keyband{overflow:hidden;} .keyband::after{ /* 밴드를 가로지르는 스캔 라이트 */ content:''; position:absolute; top:0; left:-42%; width:42%; height:100%; background:linear-gradient(90deg, transparent, var(--brand-tint), transparent); animation:kb-scan 7s linear infinite; pointer-events:none; z-index:0; } @keyframes kb-scan{ to{ left:142%; } } .fb-keys{ position:relative; z-index:1; display:grid; align-items:stretch; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; padding:16px 20px 18px; } .keyband .mkc{ display:flex; flex-direction:column; position:relative; overflow:hidden; border-radius:var(--radius); padding:12px 14px 13px 15px; margin:0 5px; } .keyband .mkc::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-bright); transition:background .18s ease; } .keyband .mkc::after{ /* 호버 시 번지는 브랜드 광 */ content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(120% 90% at 12% 0%, var(--brand-tint), transparent 62%); transition:opacity .25s ease; } .keyband .mkc:hover{border-color:var(--brand-b2); transform:translateY(-3px);} .keyband .mkc:hover::before{background:var(--brand-grad);} .keyband .mkc:hover::after{opacity:1;} .keyband .mkc b{ margin:0; font-size:17px; line-height:1.35; word-break:keep-all; min-width:0; } .keyband .mkc p{margin-top:8px;} .kc-top{display:flex; align-items:center; gap:9px; min-width:0;} .kc-ic{ position:relative; width:35px; height:35px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ic); border:1px solid var(--ic-b); background:radial-gradient(120% 120% at 30% 0%, var(--ic-b), transparent 68%), var(--ic-t); box-shadow:0 0 18px var(--ic-t); transition:transform .25s ease, box-shadow .25s ease; } .kc-ic svg{width:19px; height:19px; position:relative; z-index:1;} .kc-ic::after{ /* 퍼져나가는 halo */ content:''; position:absolute; inset:-1px; border-radius:inherit; border:1px solid var(--ic-b); animation:kc-halo 3.4s ease-out infinite; } .kc2 .kc-ic::after{animation-delay:.42s;} .kc3 .kc-ic::after{animation-delay:.84s;} .kc4 .kc-ic::after{animation-delay:1.26s;} @keyframes kc-halo{ 0%{transform:scale(1); opacity:.7;} 65%,100%{transform:scale(1.5); opacity:0;} } .keyband .mkc:hover .kc-ic{transform:translateY(-1px) scale(1.05); box-shadow:0 0 26px var(--ic-t);} /* 카드 사이를 흐르는 빛 */ .kc-link{position:relative; width:36px; align-self:start; margin-top:28px;} .kc-link::before{ content:''; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--line-bright) 30%, var(--line-bright) 70%, transparent); } .kc-link::after{ content:''; position:absolute; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 12px var(--brand); animation:kc-dot 2.8s cubic-bezier(.55,0,.45,1) infinite; } .kc-link.d2::after{animation-delay:.3s;} .kc-link.d3::after{animation-delay:.6s;} @keyframes kc-dot{ 0%{left:0; opacity:0;} 16%{opacity:1;} 84%{opacity:1;} 100%{left:calc(100% - 6px); opacity:0;} } @media (prefers-reduced-motion:reduce){ .keyband::after, .kc-ic::after{animation:none; opacity:0;} .kc-link::after{animation:none; left:calc(50% - 3px);} } .fb-node{display:flex; flex-direction:column; gap:11px; padding:0 4px; min-width:0;} .fb-top{display:flex; align-items:center; gap:12px;} .fb-ic{ width:48px; height:48px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--ic); border:1px solid var(--ic-b); background:radial-gradient(120% 120% at 30% 0%, var(--ic-b), transparent 68%), var(--ic-t); box-shadow:0 0 20px var(--ic-t); } .fb-ic svg{width:26px; height:26px;} .fb-step{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:0.12em; color:var(--text-2);} .fb-n{font-size:18px; font-weight:800; color:var(--text-0); letter-spacing:-0.02em; margin-top:3px; word-break:keep-all;} .fb-tags{display:flex; flex-wrap:wrap; gap:5px;} .fb-tags span{ font-size:14.5px; color:var(--text-1); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:3px 7px; white-space:nowrap; } /* 노드 사이를 흐르는 빛 */ .fb-link{position:relative; width:54px; align-self:start; height:48px;} /* 아이콘 중심선에 맞춤 */ .fb-link::before{ content:''; position:absolute; left:2px; right:2px; top:50%; height:1px; background:var(--line-bright); } .fb-link::after{ content:''; position:absolute; top:50%; margin-top:-3px; width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 12px var(--brand); animation:fb-dot 2.4s cubic-bezier(.55,0,.45,1) infinite; } .fb-link.d2::after{animation-delay:.28s;} .fb-link.d3::after{animation-delay:.56s;} @keyframes fb-dot{ 0%{left:0; opacity:0;} 14%{opacity:1;} 86%{opacity:1;} 100%{left:calc(100% - 6px); opacity:0;} } @media (prefers-reduced-motion:reduce){ .fb-link::after{animation:none; left:calc(50% - 3px);} } /* ========================================================================== 주요기능 — 핵심기능 12 병합 표시 ========================================================================== */ /* 전 모듈 공통 핵심 */ .mkc-band{ border:1px solid var(--brand-b1); border-radius:var(--radius); background:var(--brand-faint); padding:18px 20px 20px; margin-bottom:30px; } .mkc-head{ display:flex; align-items:center; gap:9px; margin-bottom:16px; font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand); } .mkc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .mkc{ background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 15px; transition:border-color .18s ease, transform .18s ease; } .mkc:hover{border-color:var(--brand-b2); transform:translateY(-2px);} .mkc b{display:block; font-size:17px; font-weight:800; color:var(--text-0); margin:8px 0 6px; letter-spacing:-0.01em;} .mkc p{font-size:15.5px; line-height:1.6; color:var(--text-1); word-break:keep-all;} /* 모듈 카드 안의 핵심기능 뱃지 + 호버 설명 선택한 세부기능(.mf[aria-pressed=true])이 브랜드색을 쓰므로, 핵심기능은 앰버 계열로 분리해 두 상태가 겹쳐 보이지 않게 한다. */ .mx-keys{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); } .mx-keys::before{ content:'KEY'; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.12em; color:var(--amber-dim); margin-right:1px; } .mk{ display:inline-flex; align-items:center; cursor:help; outline:none; font-size:14.5px; font-weight:700; line-height:1.35; color:var(--amber); background:var(--amber-tint); border:1px solid var(--amber-b); border-radius:4px; padding:3px 8px; word-break:keep-all; transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; } .mk:hover, .mk:focus-visible{ background:var(--amber-tint); border-color:var(--amber); box-shadow:0 0 14px rgba(251,191,36,0.18); } /* 설명문은 기본적으로 숨기고, 데스크톱에서는 body 에 띄우는 .mk-float 로 표시한다. (모듈 그리드가 CSS 다단(column-count)이라 카드 안에서 absolute 로 띄우면 다음 단으로 넘어가 엉뚱한 위치에 잘려 보인다) */ .mk-tip{display:none;} .mk-float{ position:absolute; left:0; top:0; z-index:80; pointer-events:none; padding:11px 13px; border-radius:6px; text-align:left; background:var(--panel-raised); border:1px solid var(--amber-b); box-shadow:0 14px 30px rgba(0,0,0,0.34), 0 0 20px rgba(251,191,36,0.12); font-size:15px; font-weight:500; line-height:1.65; color:var(--text-1); word-break:keep-all; opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .16s ease, transform .16s ease, visibility .16s; } .mk-float.show{opacity:1; visibility:visible; transform:translateY(0);} /* 터치 기기: 호버가 없으므로 설명을 카드 안에 그대로 노출 */ @media (hover:none){ .mk{display:block; width:100%; padding:5px 8px;} .mk-tip{ display:block; margin-top:4px; color:var(--text-2); font-size:14px; font-weight:500; line-height:1.6; } } /* ========================================================================== 구축 방식 & 유지보수 ========================================================================== */ .bd-formula{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:10px; margin-bottom:24px; } .bf-box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; position:relative; overflow:hidden; } .bf-box.res{border-color:var(--brand-b2); background:var(--brand-faint);} .bf-box.res::after{content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--brand-grad);} .bf-k{font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:0.14em; color:var(--text-2); margin-bottom:9px;} .bf-box.res .bf-k{color:var(--brand);} .bf-n{font-size:18.5px; font-weight:800; color:var(--text-0); letter-spacing:-0.015em; margin-bottom:7px; word-break:keep-all;} .bf-d{font-size:15.5px; line-height:1.65; color:var(--text-1); word-break:keep-all;} .bf-op{ display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text-2); width:22px; } .bd-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;} .bd-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 24px;} .bd-head{display:flex; align-items:center; gap:11px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line);} .bd-i{ font-family:var(--mono); font-size:14.5px; font-weight:700; color:var(--brand); border:1px solid var(--brand-b3); background:var(--brand-tint); border-radius:5px; width:31px; height:31px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .bd-head h3{font-size:19px; font-weight:800; color:var(--text-0); letter-spacing:-0.015em;} .bd-list{list-style:none; display:flex; flex-direction:column; gap:16px;} .bd-list li{position:relative; padding-left:18px;} .bd-list li::before{content:'▪'; position:absolute; left:0; top:1px; color:var(--brand); font-size:14.5px;} .bd-list b{display:block; font-size:17px; font-weight:700; color:var(--text-0); margin-bottom:5px; letter-spacing:-0.01em;} .bd-list span{display:block; font-size:16px; line-height:1.7; color:var(--text-1); word-break:keep-all;} /* ========================================================================== 푸터 — 컬럼 / 연락처 / 패밀리 사이트 ========================================================================== */ .footer-cols{display:contents;} /* 브랜드 + 2개 컬럼을 같은 그리드에 배치 */ .fcol{display:flex; flex-direction:column; gap:13px; min-width:0;} .fc-h{ font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:0.14em; color:var(--text-2); margin-bottom:4px; } /* 링크 — 평소엔 담백하게, 호버 시 화살표와 밑줄로 클릭 대상임을 표시 */ .fcol a{ position:relative; width:fit-content; font-size:16.5px; line-height:1.6; color:var(--text-1); transition:color .18s ease; } .fcol a::before{ content:'›'; position:absolute; left:-14px; top:-1px; color:var(--brand); font-size:17px; font-weight:700; opacity:0; transform:translateX(-4px); transition:opacity .18s ease, transform .18s ease; } .fcol a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; } .fcol a:hover{color:var(--brand);} .fcol a:hover::before{opacity:1; transform:translateX(0);} .fcol a:hover::after{transform:scaleX(1);} .fcol.contact{gap:11px;} .fc-v{font-size:16.5px; color:var(--text-1); line-height:1.6; word-break:keep-all;} .footer-bottom{align-items:center;} .fb-meta{display:flex; flex-wrap:wrap; gap:6px 20px;} .family{position:relative; display:inline-flex; align-items:center;} .family select{ appearance:none; -webkit-appearance:none; font-family:var(--sans); font-size:16px; font-weight:600; color:var(--text-1); background:var(--panel); border:1px solid var(--line-bright); border-radius:8px; padding:11px 42px 11px 18px; cursor:pointer; min-width:238px; transition:border-color .18s ease, color .18s ease, background .18s ease; } .family select:hover{border-color:var(--brand-b2); color:var(--brand); background:var(--panel-raised);} .family select:focus-visible{outline:1px solid var(--brand); outline-offset:2px;} .family-ic{position:absolute; right:15px; display:flex; color:var(--text-2); pointer-events:none;} .family select:hover + .family-ic{color:var(--brand);} .family option{background:var(--panel); color:var(--text-0);} @media (max-width:1240px){ .footer-grid{gap:32px;} .mkc-grid{grid-template-columns:1fr 1fr;} .bd-formula{grid-template-columns:1fr; gap:8px;} .bf-op{width:auto; height:22px; font-size:18px;} } @media (max-width:1120px){ .fb-keys{grid-template-columns:repeat(2, 1fr); gap:12px; padding:16px 16px 18px;} .kc-link{display:none;} .fb-track{grid-template-columns:1fr; padding:20px 20px 22px;} .fb-link{width:100%; height:30px;} .fb-link::before{left:50%; right:auto; top:2px; bottom:2px; width:1px; height:auto;} .fb-link::after{left:calc(50% - 3px) !important; animation-name:fb-dot-v;} @keyframes fb-dot-v{ 0%{top:0; opacity:0;} 14%{opacity:1;} 86%{opacity:1;} 100%{top:calc(100% - 6px); opacity:0;} } } @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .bd-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr; gap:36px 40px;} .footer-brand{grid-column:1 / -1;} } @media (max-width:600px), (max-device-width:600px){ .fb-keys{grid-template-columns:1fr;} footer{padding-bottom:78px;} /* 맨 위로 버튼과 겹치지 않도록 */ .mkc-grid{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr; gap:30px;} .footer-bottom{flex-direction:column; align-items:flex-start; gap:18px;} .family select{min-width:0; width:100%;} .family{width:100%;} } /* ========================================================================== 도입문의 — 서브 헤딩 · 모듈 선택 · 안내 ========================================================================== */ .ad-sub{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:0 0 20px; padding-bottom:11px; border-bottom:1px solid var(--line); } .ad-sub + .bd-formula, .ad-sub + .bd-grid{margin-top:0;} .ad-i{ font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:0.1em; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b1); border-radius:4px; padding:3px 7px; align-self:center; } .ad-sub b{font-size:19px; font-weight:800; color:var(--text-0); letter-spacing:-0.015em;} .ad-sub em{ font-style:normal; font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:0.11em; color:var(--text-2); } .ad-sub:not(:first-of-type){margin-top:54px;} .ad-note{margin-bottom:24px;} .ad-note p{font-size:17px; line-height:1.7; color:var(--text-1); word-break:keep-all;} .ad-note p b{color:var(--text-0);} .ad-note p b.hint{color:var(--brand); font-weight:600; font-size:16.5px;} /* ---------- 모듈 선택 규칙 안내 ---------- */ .ad-rules{ position:relative; overflow:hidden; margin-bottom:26px; border:1px solid var(--brand-b1); border-radius:var(--radius); background:linear-gradient(180deg, var(--brand-tint), transparent 62%), var(--panel); padding:16px 18px 18px; } .ad-rules::before{ /* 상단 브랜드 라인 */ content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--brand-grad); } .ar-head{ display:flex; align-items:center; gap:9px; margin-bottom:15px; font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:0.1em; color:var(--brand); } .ar-grid{ display:grid; align-items:stretch; gap:0; grid-template-columns:1.06fr auto 1fr 1fr; } .ar-item{ position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px 14px; margin:0 5px; transition:border-color .18s ease, transform .18s ease; } .ar-item:hover{border-color:var(--brand-b2); transform:translateY(-2px);} .ar-item.req{border-color:var(--brand-b2); background:var(--brand-faint);} .ar-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px;} .ar-tag{ font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:0.08em; color:var(--on-brand); background:var(--brand); border-radius:4px; padding:3px 9px; box-shadow:0 0 12px var(--brand-glow-soft); } .ar-tag.opt{ color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b2); box-shadow:none; padding:2px 8px; } .ar-step{font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:0.12em; color:var(--text-2);} .ar-name{ font-size:18.5px; font-weight:700; line-height:1.45; color:var(--text-1); letter-spacing:-0.015em; word-break:keep-all; margin-bottom:6px; } .ar-name b{font-weight:800; color:var(--text-0);} .ar-item.req .ar-name b{color:var(--brand);} .ar-d{font-size:15.5px; line-height:1.65; color:var(--text-2); word-break:keep-all;} /* 모듈 선택 방식 미니 데모 */ .ar-demo{margin-top:12px;} .dm-card{ position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:9px 10px 10px; } .dm-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brand);} .dm-card.some::before{background:linear-gradient(180deg, var(--brand) 55%, var(--line-bright) 55%);} .dm-h{display:flex; align-items:center; gap:8px; margin-bottom:8px;} .dm-h b{font-size:16px; font-weight:700; color:var(--text-0);} .dm-badge{ margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--brand); border:1px solid var(--brand-b2); border-radius:999px; padding:2px 6px; } .dm-badge.part{color:var(--text-2); border-color:var(--line-bright);} .dm-box{ position:relative; width:15px; height:15px; flex-shrink:0; border-radius:5px; display:flex; align-items:center; justify-content:center; border:1px solid var(--brand); background:var(--brand); box-shadow:0 0 10px var(--brand-glow); color:var(--on-brand); } .dm-box svg{width:9px; height:9px;} .dm-box.on::after{ content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--on-brand); border-width:0 1.8px 1.8px 0; transform:rotate(42deg); } .dm-box.part{background:var(--brand-tint); box-shadow:none;} .dm-box.part::after{ content:''; position:absolute; left:3px; right:3px; top:5.5px; height:2px; border-radius:1px; background:var(--brand); } .dm-fs{display:flex; flex-wrap:wrap; gap:4px 5px;} .dm-fs span{ font-size:14.5px; line-height:1.3; color:var(--text-2); word-break:keep-all; background:var(--bg); border:1px dashed var(--line-bright); border-radius:4px; padding:3px 6px; } .dm-fs span.on{ color:var(--brand); font-weight:600; background:var(--brand-tint); border:1px solid var(--brand-b3); border-style:solid; } /* A / B 를 잇는 분기 표시 */ .ar-or{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:108px; padding:0 4px; text-align:center; position:relative; } .ar-or::before{ content:''; position:absolute; left:50%; top:12px; bottom:12px; width:1px; background:linear-gradient(180deg, transparent, var(--line-bright), transparent); } .ar-or em{ position:relative; font-style:normal; font-size:14.5px; line-height:1.4; color:var(--text-2); word-break:keep-all; background:var(--panel); padding:2px 0; } .ar-or b{ position:relative; font-size:14.5px; font-weight:700; color:var(--brand); word-break:keep-all; background:var(--panel); padding:2px 0; } @media (max-width:1240px){ .ar-grid{grid-template-columns:1fr 1fr; gap:10px 0;} .ar-or{width:auto; grid-column:1 / -1; flex-direction:row; gap:7px; padding:4px 0;} .ar-or::before{left:12px; right:12px; top:50%; bottom:auto; width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--line-bright), transparent);} .ar-item.req{grid-column:1 / -1;} } @media (max-width:820px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .ar-grid{grid-template-columns:1fr;} .ar-item{margin:0;} .ar-item.pick{grid-column:auto;} } /* ---------- 모듈 선택 ---------- */ .mx-req{ font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:0.1em; line-height:1.5; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b1); border-radius:5px; padding:4px 9px; margin-left:4px; } .mx-pick{ display:inline-flex; align-items:center; gap:8px; min-width:0; background:none; border:0; padding:0; margin:0; cursor:pointer; font-family:inherit; color:inherit; text-align:left; } .mx-pick.lock{cursor:default;} .mx-pick:focus-visible{outline:1px solid var(--brand); outline-offset:3px; border-radius:4px;} .mp-box{ position:relative; width:16px; height:16px; flex-shrink:0; border-radius:5px; border:1px solid var(--line-bright); background:var(--bg); transition:background .16s ease, border-color .16s ease, box-shadow .16s ease; } .mp-box::after{ content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--on-brand); border-width:0 1.8px 1.8px 0; transform:rotate(42deg) scale(.4); opacity:0; transition:transform .16s ease, opacity .16s ease; } .mx-card.sel:hover .mp-box{border-color:var(--brand-b3);} .mx-card.on .mp-box, .mx-card.fixed .mp-box{ background:var(--brand); border-color:var(--brand); box-shadow:0 0 12px var(--brand-glow); } .mx-card.on .mp-box::after, .mx-card.fixed .mp-box::after{opacity:1; transform:rotate(42deg) scale(1);} .mx-card.part .mp-box{background:var(--brand-tint); border-color:var(--brand);} .mx-card.part .mp-box::before{ content:''; position:absolute; left:3px; right:3px; top:6.5px; height:2px; border-radius:1px; background:var(--brand); } .mx-card.sel{cursor:default;} .mx-card.on, .mx-card.part{border-color:var(--brand-b3); background:var(--panel-raised);} .mx-card.on::before, .mx-card.part::before{background:var(--brand);} .mx-card.fixed{border-color:var(--brand-b1);} .mx-card.fixed::before{background:var(--brand-b2);} .mx-f .mf{ font-family:inherit; font-size:14.5px; line-height:1.3; color:var(--text-1); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:4px 7px; cursor:pointer; text-align:left; word-break:keep-all; transition:color .15s ease, border-color .15s ease, background .15s ease; } .mx-f .mf:hover{border-color:var(--brand-b2); color:var(--brand);} .mx-f .mf:focus-visible{outline:1px solid var(--brand); outline-offset:2px;} .mx-f .mf[aria-pressed="true"]{ color:var(--brand); font-weight:600; border-color:var(--brand-b3); background:var(--brand-tint); } /* ---------- 선택 요약 바 ---------- */ .msel{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:24px; padding:15px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:border-color .2s ease, background .2s ease; } .msel.active{border-color:var(--brand-b2); background:var(--brand-faint);} .msel-l{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; min-width:0;} .msel-l b{font-size:18px; font-weight:800; color:var(--text-0); letter-spacing:-0.01em;} .msel-sub{font-size:15.5px; color:var(--text-2); word-break:keep-all;} .msel-r{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .msel-reset{ font-family:inherit; font-size:16px; font-weight:600; color:var(--text-1); background:none; border:1px solid var(--line-bright); border-radius:999px; padding:8px 14px; cursor:pointer; transition:color .18s ease, border-color .18s ease; } .msel-reset:hover{color:var(--brand); border-color:var(--brand-b2);} .msel-reset[hidden]{display:none;} .msel-go{font-size:16.5px; padding:10px 18px;} /* ---------- 문의 폼 · 관심 모듈 ---------- */ .ff-hint{font-style:normal; font-family:var(--sans); font-size:14.5px; color:var(--text-2); letter-spacing:0;} .pickbox{ display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; min-height:70px; padding:13px 14px; border:1px dashed var(--line-bright); border-radius:var(--radius); background:var(--bg); } .pick-empty{font-size:16px; color:var(--text-2); align-self:center;} .pk{ display:inline-flex; align-items:center; gap:7px; max-width:100%; font-size:15px; line-height:1.4; color:var(--text-1); background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:5px 9px; word-break:keep-all; } .pk b{font-weight:700; color:var(--text-0); flex-shrink:0;} .pk em{font-style:normal; color:var(--text-2); font-size:14.5px;} .pk-d{width:6px; height:6px; border-radius:50%; flex-shrink:0; background:var(--line-bright);} .pk.base{border-color:var(--brand-b2); background:var(--brand-faint);} .pk.base .pk-d{background:var(--brand); box-shadow:0 0 8px var(--brand-glow);} .pk.base em{color:var(--brand); font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:0.08em;} .pk.ext .pk-d{background:var(--brand);} .pk.add .pk-d{background:var(--text-1);} .pk.link .pk-d{background:var(--amber);} .pick-act{display:flex; gap:14px; margin-top:2px;} .pick-link{ font-family:inherit; font-size:15px; font-weight:600; color:var(--brand); background:none; border:0; padding:0; cursor:pointer; } .pick-link.ghost{color:var(--text-2);} .pick-link:hover{text-decoration:underline;} .pick-link[hidden]{display:none;} @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .msel{align-items:flex-start; flex-direction:column; gap:14px;} .msel-r{width:100%;} .msel-go{flex:1 1 auto; justify-content:center;} } /* ========================================================================== MOBILE — 모바일 전용 재설계 (≤900px) PC 레이아웃을 줄이는 대신, 손가락과 작은 화면 기준으로 다시 짠 규칙입니다. ========================================================================== */ /* 가로로 삐져나가는 요소가 하나라도 있으면 모바일 브라우저가 화면 전체를 축소해 버립니다. 아래 두 줄이 그 축소를 원천 차단합니다. */ html, body{max-width:100%; overflow-x:hidden;} /* ---------- 모바일 메뉴 (햄버거 + 드로어) ---------- */ .nav-burger{display:none;} .nav-drawer{display:none;} .nav-scrim{display:none;} @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0 10px; cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:10px; } .nav-burger span{ display:block; height:2px; width:100%; border-radius:2px; background:var(--text-0); transition:transform .22s ease, opacity .18s ease; } .nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-burger.on span:nth-child(2){opacity:0;} .nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-drawer{ display:flex; flex-direction:column; gap:2px; position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,0.34); padding:10px 20px 16px; } .nav-drawer[hidden]{display:none;} .nav-drawer button{ text-align:left; font-family:var(--sans); font-size:17.5px; font-weight:700; color:var(--text-0); background:none; border:none; cursor:pointer; padding:15px 4px; border-bottom:1px solid var(--line); } .nav-drawer button:last-of-type{border-bottom:none;} .nd-tel{ display:block; margin-top:12px; padding:14px; text-align:center; font-size:17.5px; font-weight:700; color:var(--on-brand); background:var(--brand-grad); border-radius:9px; } .nav-scrim{ display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px); } .nav-scrim[hidden]{display:none;} body.nav-open{overflow:hidden;} header{position:relative;} } @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ /* ---------- 레이아웃: 넘침 제거 ---------- */ .mx-pair{grid-template-columns:1fr;} .mx-grid{column-count:1 !important;} .arch-cols{grid-template-columns:repeat(2,minmax(0,1fr));} .bd-grid, .compat-row, .mkc-grid, .egov-grid, .footer-grid{grid-template-columns:1fr;} .fb-track{grid-template-columns:1fr;} .console, .arch, .sd-col, .mx-card, .bd-card{max-width:100%;} img, svg, table{max-width:100%;} /* ---------- 타이포: 손에 들고 읽는 크기로 ---------- */ section{padding:56px 0;} .wrap{--wrap-pad:18px;} .section-head{margin-bottom:30px; max-width:none;} h2{font-size:27.5px; line-height:1.32; letter-spacing:-0.03em;} .section-head p{font-size:17.5px; line-height:1.7;} .eyebrow{font-size:14px; letter-spacing:0.1em;} .hero{padding-top:34px;} .hero-copy h1{font-size:32.5px; line-height:1.28;} .hero-copy p{font-size:14px; line-height:1.78;} .hero-tags{gap:8px 12px;} .hero-tags span{font-size:16px;} /* 본문·라벨 최소 크기 확보 (PC 10~11px → 모바일 13~14px) */ .cc-v, .fc-v, .eg-n, .bf-n, .fb-n, .uc-n, .mkc b, .sd-title{font-size:17.5px;} .eg-d, .bf-d, .mkc p, .ug-note, .cp-v, .mk-tip, .fb-tags span, .bd-list span, .egov-cell .eg-d, .sd-lead{font-size:16px; line-height:1.7;} .cc-k, .fc-h, .fb-step, .bf-k, .ug-h, .mx-desc, .arch-panel-title{font-size:14px;} .mx-f span, .arch-col li, .chiprow span, .integ-chip{font-size:16px; line-height:1.5;} .mx-card h3, .arch-col h4{font-size:17.5px;} .mx-n, .mk-n, .eg-ic + *, .cd-list dd{font-size:16px;} /* ---------- 터치 영역 ---------- */ .btn, .nav-cta, .sol-tab, .mf, .mx-pick, .pick-link, .form-submit, .theme-toggle, .kf-toggle, .flow-zoom{min-height:44px;} .flow-zoom{padding:0 14px;} .btn{font-size:17.5px; padding:13px 20px;} .hero-actions{flex-direction:column; align-items:stretch; gap:10px;} .hero-actions .btn{width:100%; justify-content:center;} .nav-cta{font-size:16px; padding:11px 14px;} /* ---------- 폼 : iOS 자동 확대 방지(16px 미만이면 확대됨) ---------- */ .form-field input, .form-field select, .form-field textarea, #inquiryForm input, #inquiryForm select, #inquiryForm textarea{ font-size:17.5px; padding:13px 14px; } .form-field label{font-size:16px;} .consent-text, .cd-body, .form-note{font-size:16px; line-height:1.7;} /* ---------- 6대 솔루션 탭 : 가로 스와이프 ---------- */ .sol-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -18px 18px; padding:0 18px 8px; scrollbar-width:none; } .sol-tabs::-webkit-scrollbar{display:none;} .sol-tab{flex:0 0 auto; font-size:16px;} /* ---------- 구성도 : 세로 한 줄로 (flex-wrap 이 남아 있으면 옆으로 흘러넘칩니다) ---------- */ .arch-users{flex-direction:column; flex-wrap:nowrap;} .arch-panel-title{flex-basis:auto;} .ug{flex:0 0 auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch;} .ug-h{flex-basis:auto; width:100%;} .user-cell{flex:0 0 auto; width:auto; max-height:none;} .arch-arrow{flex-basis:auto;} .arch-col li{padding:7px 9px;} .egov-cell{padding:16px;} .eg-ic, .uc-ic, .fb-ic{width:44px; height:44px;} /* ---------- 푸터 ---------- */ .footer-grid{gap:28px;} .fcol a, .fc-v{font-size:17px; padding:2px 0;} .fb-meta{font-size:16px; line-height:1.8;} .family select{width:100%; font-size:16.5px; min-height:46px;} /* 맨 위로 버튼이 하단 콘텐츠를 가리지 않도록 */ .to-top{width:46px; height:46px; right:16px; bottom:16px;} footer{padding-bottom:84px;} } @media (max-width:520px), (max-device-width:600px){ .arch-cols{grid-template-columns:1fr;} h2{font-size:24.5px;} .hero-copy h1{font-size:28.5px;} .wrap{--wrap-pad:16px;} .sol-tabs{margin:0 -16px 18px; padding:0 16px 8px;} } /* ========================================================================== MOBILE v2 — 모바일 전용 구성 (≤900px) 섹션마다 표시 방식을 바꿔, 이동 중에 훑어보는 사람 기준으로 다시 짰습니다. ========================================================================== */ /* 가로 넘침이 하나라도 있으면 모바일 브라우저가 화면 전체를 축소합니다 */ html, body{max-width:100%; overflow-x:hidden;} /* 하단 고정 바 / 햄버거 : 기본은 숨김, 모바일에서만 노출 */ .mbar{display:none;} .nav-burger{display:none;} .nav-drawer{display:none;} .nav-scrim{display:none;} @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ /* ================= 공통 : 글자 · 여백 · 섹션 구분 ================= */ .wrap{padding:0 20px;} section{padding:64px 0;} section + section{border-top:1px solid var(--line);} /* 섹션 경계선 */ .section-head{margin-bottom:34px; max-width:none;} h2{font-size:27px; line-height:1.3; letter-spacing:-0.03em;} .section-head p{font-size:15.5px; line-height:1.72;} .eyebrow{font-size:11.5px; letter-spacing:0.1em; margin-bottom:12px;} /* 최소 글자 크기 확보 (PC 10~11px 짜리들을 13px 이상으로) */ .cc-v, .fc-v, .eg-n, .bf-n, .fb-n, .uc-n, .mkc b, .kc-t{font-size:15px;} .eg-d, .bf-d, .mkc p, .ug-note, .cp-v, .fb-tags span, .bd-list span, .sd-lead, .kc-d, .status-box li, .mx-desc{font-size:13.5px; line-height:1.72;} .cc-k, .fc-h, .fb-step, .bf-k, .ug-h, .arch-panel-title, .sd-sub{font-size:11.5px;} .mx-f span, .arch-col li, .chiprow span, .sd-tags span{font-size:13px; line-height:1.5;} /* 터치 영역 */ .btn, .nav-cta, .mf, .mx-pick, .pick-link, .form-submit, .theme-toggle, .flow-zoom{min-height:46px;} .btn{font-size:15.5px; padding:14px 20px;} .hero-actions{flex-direction:column; align-items:stretch; gap:10px;} .hero-actions .btn{width:100%; justify-content:center;} .nav-cta{font-size:13px; padding:11px 14px;} /* ================= 상단 : 햄버거 메뉴 ================= */ header{position:relative;} .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 11px; cursor:pointer; background:var(--panel); border:1px solid var(--line); border-radius:11px; } .nav-burger span{ display:block; height:2px; width:100%; border-radius:2px; background:var(--text-0); transition:transform .22s ease, opacity .18s ease; } .nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-burger.on span:nth-child(2){opacity:0;} .nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .nav-drawer{ display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 20px 44px rgba(0,0,0,0.36); padding:8px 20px 18px; } .nav-drawer[hidden]{display:none;} .nav-drawer button{ text-align:left; font-family:var(--sans); font-size:16.5px; font-weight:700; color:var(--text-0); background:none; border:none; cursor:pointer; padding:17px 4px; border-bottom:1px solid var(--line); } .nav-drawer button:last-of-type{border-bottom:none;} .nd-tel{ display:block; margin-top:14px; padding:15px; text-align:center; font-size:15.5px; font-weight:700; color:var(--on-brand); background:var(--brand-grad); border-radius:10px; } .nav-scrim{display:block; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.5);} .nav-scrim[hidden]{display:none;} body.nav-open{overflow:hidden;} /* ================= 아코디언 공통 ================= */ .acc > [aria-expanded]{ position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; padding-right:46px; min-height:54px; } .acc > [aria-expanded]:active{background:var(--brand-faint);} .acc-count{ margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-tint); border:1px solid var(--brand-b2); border-radius:20px; padding:3px 10px; flex-shrink:0; } .acc-chev{ position:absolute; right:14px; top:50%; width:10px; height:10px; flex-shrink:0; border-right:2px solid var(--text-2); border-bottom:2px solid var(--text-2); transform:translateY(-70%) rotate(45deg); transition:transform .22s ease; } .acc.open .acc-chev{transform:translateY(-20%) rotate(-135deg); border-color:var(--brand);} /* ================= 시스템 구성도 ================= */ .arch{grid-template-columns:1fr; gap:1px;} .arch-users{flex-direction:column; flex-wrap:nowrap; padding:16px;} .arch-panel-title{flex-basis:auto;} .ug{flex:0 0 auto; flex-direction:column; flex-wrap:nowrap; align-items:stretch;} .ug-h{flex-basis:auto; width:100%;} .user-cell{flex:0 0 auto; width:auto; max-height:none; padding:13px;} .arch-arrow{flex-basis:auto;} .arch-cols{grid-template-columns:1fr 1fr; gap:9px; padding:14px; background:transparent;} .arch-col{ padding:0; align-self:start; border:1px solid var(--line); border-radius:11px; background:var(--panel); overflow:hidden; } .arch-col .ac-head{ font-size:15px; font-weight:700; padding:0 40px 0 14px; margin:0; border-radius:0; background:transparent; color:var(--text-0); text-align:left; min-height:56px; } .arch-col.open .ac-head{color:var(--brand);} .arch-col ul{display:none; padding:10px 12px 14px; border-top:1px dashed var(--line);} .arch-col.open ul{display:block;} .arch-col li{padding:10px 11px; margin-bottom:6px; border-radius:6px;} .arch-cols .arch-col.open{grid-column:1 / -1;} /* 펼치면 한 줄 전체 사용 */ .arch-col .acc-count{ position:absolute; right:36px; top:50%; transform:translateY(-50%); margin:0; padding:2px 8px; font-size:11.5px; } .arch-col .acc-chev{right:15px; width:9px; height:9px;} .egov-grid{grid-template-columns:1fr;} .egov-cell{padding:16px;} .eg-ic, .uc-ic, .fb-ic{width:42px; height:42px;} /* ================= 6대 솔루션 : 탭 → 아코디언 ================= */ .sol-tabs{display:none;} .sol-stage{display:flex; flex-direction:column; gap:12px;} .sol-detail{ display:block !important; margin:0; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; } .sol-detail .sd-head{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px 46px 18px 18px; border-bottom:none; } .sol-detail.open .sd-head{border-bottom:1px solid var(--line);} .sd-idrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .sd-title{font-size:18px;} .sd-lead{margin:0;} .sol-detail .sd-body{display:none; padding:18px;} .sol-detail.open .sd-body{display:block;} .sd-body{grid-template-columns:1fr !important; gap:16px;} .status-box{padding:16px;} .status-box li{padding:8px 0 8px 15px;} /* 도식 : 자리만 잡고 '크게 보기'로 유도 */ .flowfig{margin-top:14px;} .flowsvg{max-height:210px; width:100%; opacity:.62;} .flow-zoom{ position:static; display:flex; width:100%; margin-top:10px; align-items:center; justify-content:center; gap:8px; font-size:14.5px; font-weight:700; opacity:1; } /* ================= 도입문의 ================= */ .bd-formula, .bd-grid, .mkc-grid, .mx-pair, .compat-row, .fb-track{grid-template-columns:1fr;} .mx-grid{column-count:1 !important; display:none;} .mx-tier.open .mx-grid{display:block;} .mx-head{flex-wrap:wrap; padding:16px 44px 16px 4px; min-height:54px;} .mx-tier{border-bottom:1px solid var(--line);} .pickbar{flex-direction:column; align-items:stretch; gap:10px;} /* ================= 문의하기 : 전화·메일을 폼 위로 ================= */ .contact-grid{grid-template-columns:1fr; display:flex; flex-direction:column;} .contact-info{order:1; padding:24px 20px;} .contact-form{order:2; padding:24px 20px;} .form-field input, .form-field select, .form-field textarea, #inquiryForm input, #inquiryForm select, #inquiryForm textarea{ font-size:16px; padding:14px; /* 16px 미만이면 iOS 가 입력할 때 화면을 확대합니다 */ } .form-field label{font-size:13.5px;} .consent-text, .cd-body, .form-note{font-size:13.5px; line-height:1.7;} /* ================= 하단 고정 바 ================= */ .mbar{ display:flex; align-items:stretch; gap:8px; z-index:70; position:fixed; left:0; right:0; bottom:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--header-bg); backdrop-filter:blur(14px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .26s ease; } .mbar.show{transform:translateY(0);} .mbar-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px; border-radius:11px; cursor:pointer; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:-0.01em; } .mbar-btn svg{width:19px; height:19px; flex-shrink:0;} .mbar-btn.call{color:var(--text-0); background:var(--panel-raised); border:1px solid var(--line-bright);} .mbar-btn.ask{color:var(--on-brand); background:var(--brand-grad); border:none;} .mbar-top{ width:50px; flex-shrink:0; border-radius:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-1); background:var(--panel-raised); border:1px solid var(--line-bright); } .mbar-top svg{width:19px; height:19px;} .to-top{display:none;} /* 하단 바에 통합 */ footer{padding-bottom:104px;} /* 고정 바에 가리지 않도록 */ /* ================= 도식 라이트박스 : 손가락 확대 ================= */ .lb-stage{overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pinch-zoom pan-x pan-y;} .lb-stage svg{min-width:760px;} /* 좌우로 밀어 볼 수 있게 */ /* ================= 푸터 ================= */ .footer-grid{grid-template-columns:1fr; gap:30px;} .fcol a, .fc-v{font-size:14.5px; padding:3px 0;} .family select{width:100%; font-size:15px; min-height:48px;} } @media (max-width:520px), (max-device-width:600px){ .wrap{padding:0 17px;} h2{font-size:24px;} .hero-copy h1{font-size:34px; line-height:1.3;} .arch-col .ac-head{font-size:14px; padding-right:38px;} .arch-col .acc-count{right:32px; padding:2px 7px;} .mbar-btn{font-size:14px;} } /* ========================================================================== MOBILE / WEBVIEW — 공통 보정 max-width 하나로만 판정하면, viewport 를 무시하고 980px 로 그리는 환경(웹뷰·개발자도구 기기 모드 등)에서 모바일 규칙이 전부 빗나갑니다. 기기 자체의 폭과 포인터 종류로도 판정하도록 조건을 넓혔습니다. ========================================================================== */ @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ html,body{max-width:100%;overflow-x:hidden;} img,svg,iframe,table{max-width:100%;} .btn,.nav-cta,.sol-tab,.theme-toggle,.flow-zoom,.form-submit{min-height:44px;} } /* ========================================================================== MOBILE 세부 조정 (2차) 파일 맨 뒤라 앞의 모바일 블록들보다 나중에 적용됩니다. ========================================================================== */ @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ /* ---------- 1. 상단 '구축 상담 신청' 제거 ---------- 하단 고정 바의 '문의 남기기'가 같은 역할을 합니다. */ .nav-cta{display:none !important;} /* ---------- 2. 상단바 항상 고정 + 얇게 ---------- 앞 블록의 header{position:relative} 가 sticky 를 덮어써서 스크롤 시 사라지고 있었습니다. fixed 로 못박고 body 에 그만큼 여백을 줍니다. */ header{position:fixed; top:0; left:0; right:0; z-index:80;} body{padding-top:56px;} .nav{height:56px;} .logo-img{height:24px;} .nav-right{gap:8px;} .nav-burger{width:42px; height:42px; padding:0 10px; gap:4px; border-radius:10px;} .theme-toggle{width:42px; height:42px; min-height:42px;} section, header{scroll-margin-top:66px;} /* 메뉴가 길어도 화면 안에서 스크롤되도록 */ .nav-drawer{max-height:calc(100vh - 56px); overflow-y:auto;} /* ---------- 3-1. 흐름도 미리보기 : 가운데로 ---------- min-width:680px 를 풀어야 그림이 화면 폭 기준으로 가운데 옵니다. */ .flowfig{overflow:hidden; padding:14px 12px 12px;} .flowfig .flowsvg{min-width:0; width:100%; max-height:200px;} /* ---------- 3-2. 크게 보기 : 왼쪽부터 좌우 스크롤 ---------- flex 가운데정렬 + 넘침 조합은 왼쪽으로 스크롤이 안 됩니다. 스크롤을 패널(.lb-svg) 안으로 옮기고 정렬을 flex-start 로 바꿉니다. */ .lightbox{align-items:flex-start; justify-content:flex-start; padding:52px 0 60px;} .lb-stage{display:block; width:100%; min-width:0; min-height:0; overflow:visible;} .lb-svg{ width:auto; max-width:none; margin:0; border-radius:0; border-left:none; border-right:none; padding:14px 12px; box-shadow:none; overflow-x:auto; -webkit-overflow-scrolling:touch; } .lb-svg .flowsvg{min-width:820px; width:820px; max-height:none; opacity:1;} .lightbox.zoomed .lb-svg{width:auto;} .lightbox.zoomed .lb-svg .flowsvg{min-width:1240px; width:1240px;} /* ---------- 4. 소메뉴 구분 뚜렷하게 ---------- 테두리를 한 단계 밝히고 카드 사이 간격을 벌립니다. */ .sol-stage{gap:18px; border:none; background:transparent; overflow:visible;} .sol-detail{ border:1px solid var(--line-bright); border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,0.10); } .sol-detail.open{border-color:var(--brand-b2);} .sol-detail .sd-head{padding:18px 46px 18px 18px;} .arch-cols{gap:14px; padding:14px 12px;} .arch-col{border-color:var(--line-bright); box-shadow:0 2px 8px rgba(0,0,0,0.08);} .mx{gap:14px;} .mx-tier{ border:1px solid var(--line-bright); border-bottom:1px solid var(--line-bright); border-radius:14px; background:var(--panel); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.10); } .mx-tier.open{border-color:var(--brand-b2);} .mx-head{padding:16px 44px 16px 16px;} .mx-tier.open .mx-grid{padding:0 14px 16px;} /* 섹션(01·02·03) 사이도 한 번 더 띄웁니다 */ .ad-sub:not(:first-of-type){margin-top:42px;} /* ---------- 5. 푸터 저작권 줄 ---------- 한 줄에 안 들어가 어정쩡하게 감기던 것을 두 줄로 정리하고 크기를 줄입니다. */ .footer-bottom{gap:14px; padding-top:18px;} .fb-meta{ flex-direction:column; flex-wrap:nowrap; gap:4px; font-size:12px; line-height:1.55; letter-spacing:0; } } /* 라이트 모드에서는 그림자를 더 옅게 */ [data-theme="light"] .sol-detail, [data-theme="light"] .mx-tier{} [data-theme="light"] .arch-col{box-shadow:0 2px 8px rgba(15,23,42,0.05);} /* ========================================================================== 글꼴 보정 (PC · 모바일 공통) JetBrains Mono 에는 한글 글리프가 없어서, 한글이 시스템 고정폭 글꼴로 떨어지며 못생기게 렌더링됐습니다. 뒤에 Pretendard 를 붙이면 영문·숫자는 JetBrains Mono, 한글은 Pretendard 로 각각 잡힙니다. ========================================================================== */ :root{ --mono:'JetBrains Mono','Pretendard Variable',Pretendard, 'Apple SD Gothic Neo','Malgun Gothic',ui-monospace,monospace; } /* 한글 비중이 높은 값 텍스트는 아예 본문 글꼴로 */ .console-row .cr-val, .console-core .cc-sub, .uc-d, .fc-v, .footer-contact{font-family:var(--sans);} /* ========================================================================== MOBILE 세부 조정 (3차) ========================================================================== */ @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ /* ---------- 1. 히어로 하단 태그 · 저작권 줄 축소 ---------- 중요한 정보가 아닌데 자리를 크게 차지하고 있었습니다. */ .hero-tags{gap:5px 13px; margin-top:2px;} .hero-tags span{font-size:12.5px; gap:5px; line-height:1.55;} .hero-cert{ margin-top:10px; padding:4px 9px 4px 8px; gap:5px; font-size:12.5px; line-height:1.45; } .hc-label{font-size:12px;} .hc-no{font-size:12.5px; letter-spacing:0.02em;} .hc-org{font-size:11.5px;} /* ---------- 2. SYSTEM.STACK 정렬 ---------- 좌우 양끝정렬 + 우측정렬이라 값이 감길 때마다 들쭉날쭉했습니다. 라벨 열을 고정폭으로 두고 값은 전부 왼쪽에 맞춥니다. */ .console{padding:18px 16px;} .console-head{margin-bottom:14px; padding-bottom:12px;} .console-head .ch-label, .console-head .ch-live{font-size:12px;} .console-row{ display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:4px 10px; padding:10px 0; } .console-row.multi{align-items:start;} .console-row .cr-name{font-size:14.5px; gap:8px; white-space:nowrap; padding-top:1px;} .console-row .cr-val{font-size:13px; line-height:1.65; text-align:left;} .cr-val.cr-multi{align-items:flex-start; gap:6px;} .cr-val.cr-multi > span{display:block;} /* 강조 칩이 두 줄로 감겨도 양쪽 테두리가 살아 있도록 */ .cr-hl{ display:inline; padding:2px 7px; line-height:2.1; -webkit-box-decoration-break:clone; box-decoration-break:clone; } .console-core{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 15px; position:relative; } .console-core .cc-name{font-size:15px;} .console-core .cc-sub{font-size:12px; line-height:1.55;} .console-core .cc-stat{ position:absolute; top:14px; right:15px; font-size:13px; white-space:nowrap; } /* ---------- 3. 구성도 헤더 한 줄 정리 ---------- */ .arch-core-head{ flex-wrap:wrap; gap:4px 8px; padding:12px 14px; font-size:12.5px; letter-spacing:0.02em; line-height:1.45; } .ach-legend{font-size:12px; gap:5px; margin-left:auto; flex-shrink:0;} .ach-legend i{width:9px; height:9px;} /* ---------- 4. SELECTION RULES 한 줄로 ---------- */ .ar-head{ flex-wrap:nowrap; gap:7px; margin-bottom:12px; font-size:12px; letter-spacing:0.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- 5. 크게 보기 : 처음엔 전체가 다 보이도록 ---------- 열면 도식 전체가 화면 폭에 맞춰 들어오고, 한 번 더 탭하면 확대됩니다. */ .lb-svg .flowsvg{min-width:0; width:100%; max-height:none; opacity:1;} .lightbox.zoomed .lb-svg .flowsvg{min-width:1240px; width:1240px;} .lb-cap{font-size:12px; padding:0 14px;} /* ---------- 6. 회사 소개 문단 축소 ---------- */ .contact-info h3{margin-bottom:10px;} .cp-ko{font-size:19px;} .cp-en{font-size:11px; letter-spacing:0.1em;} .contact-info p{font-size:13.5px; line-height:1.65; margin-bottom:18px;} .contact-channel{padding:14px 0;} .contact-channel .cc-k{font-size:11px;} .contact-channel .cc-v{font-size:15px;} /* ---------- 7. 푸터 정리 ---------- 간격만 넓고 구획이 없어 늘어져 보였습니다. 블록마다 얇은 구분선을 두고, 메뉴는 2열로 접어 길이를 절반으로 줄입니다. */ footer{padding:30px 0 104px;} .footer-grid{grid-template-columns:1fr; gap:0; padding-bottom:16px;} .footer-brand{padding-bottom:18px; border-bottom:1px solid var(--line);} .footer-brand .logo{margin-bottom:11px;} .footer-brand .logo-img{height:26px;} .footer-brand p{font-size:13px; line-height:1.6;} .fcol{gap:0; padding:16px 0; border-bottom:1px solid var(--line);} .fcol.contact{border-bottom:none; padding-bottom:4px;} .fc-h{font-size:11px; letter-spacing:0.12em; margin-bottom:9px;} .fcol a, .fc-v{font-size:14px; line-height:1.5; padding:6px 0;} /* MENU 4개는 2열로 */ nav.fcol{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;} nav.fcol .fc-h{grid-column:1 / -1;} } @media (max-width:520px), (max-device-width:600px){ .console-row{grid-template-columns:84px minmax(0,1fr);} .console-row .cr-name{font-size:13.5px;} .console-row .cr-val{font-size:12.5px;} .ar-head{font-size:11.5px; letter-spacing:0.01em;} .cp-ko{font-size:18px;} } /* ---------- 히어로 KEY FEATURES : 머리말 제거 ---------- '전 모듈 공통' 설명이 첫 화면 위쪽을 크게 차지해서, 모바일에서는 머리말을 걷어내고 특징 카드 4개만 남깁니다. (PC 는 그대로) */ @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ .keyband .fb-head{display:none;} .keyband{border:none; background:transparent; overflow:visible;} .keyband::before, .keyband::after{display:none;} .keyband .fb-keys{padding:0; gap:10px;} .hero .wrap.hl-strip{margin-top:20px;} } /* ========================================================================== SELECTION RULES 예시 카드 — 실제 조작 대상이 아님을 분명히 (PC·모바일 공통) 아래 '모듈 구성' 의 진짜 카드와 생김새가 같아서 눌러보게 됩니다. 점선 액자 + '예시' 배지로 화면 캡처처럼 보이게 하고, 입력도 막습니다. ========================================================================== */ .ar-demo{ position:relative; margin-top:17px; padding:14px 11px 11px; border:1px dashed var(--line-bright); border-radius:10px; background:var(--bg); } .ar-demo::before{ content:'예시'; position:absolute; top:-9px; left:12px; padding:1px 9px; border-radius:999px; background:var(--panel-raised); border:1px dashed var(--line-bright); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.1em; color:var(--text-2); } .ar-demo .dm-card{opacity:0.94; box-shadow:none;} .ar-demo .dm-card, .ar-demo .dm-card *{pointer-events:none; user-select:none; cursor:default;} /* ========================================================================== MOBILE 푸터 — 담백한 텍스트로 (4차 수정) 타일·카드형은 과해서 걷어냈습니다. 링크에 붙어 있던 hover 장식은 display:none 으로는 완전히 죽지 않아 content:none 으로 없앱니다. ========================================================================== */ @media (max-width:900px), (max-device-width:820px), (hover:none) and (pointer:coarse) and (max-width:1000px){ /* 화살표(::before) · 밑줄(::after) 장식 완전 제거 */ .fcol a::before, .fcol a::after, .fcol .fc-v::before, .fcol .fc-v::after{content:none; display:none;} footer{padding:28px 0 104px;} .footer-grid{ grid-template-columns:1fr; gap:22px; padding-bottom:16px; border-bottom:1px solid var(--line); } /* ---------- 브랜드 ---------- */ .footer-brand{padding:0; border:none;} .footer-brand .logo{margin-bottom:9px;} .footer-brand .logo-img{height:24px;} .footer-brand p{font-size:12.5px; line-height:1.6; color:var(--text-2);} .footer-brand p .nb{color:var(--text-1); font-weight:600;} .fc-h{font-size:10.5px; letter-spacing:0.12em; color:var(--text-2); margin-bottom:7px;} /* ---------- MENU : 테두리 없이 2열 텍스트 ---------- */ nav.fcol{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; padding:0; border:none; background:none; border-radius:0; } nav.fcol .fc-h{grid-column:1 / -1; margin:0 0 5px;} nav.fcol a{ display:block; width:auto; min-height:0; padding:6px 0; background:none; border:none; border-radius:0; font-size:13px; font-weight:400; line-height:1.5; color:var(--text-1); text-align:left; } /* ---------- CONTACT : 테두리 없이 한 줄씩 ---------- */ .fcol.contact{ display:block; padding:0; overflow:visible; border:none; border-radius:0; background:none; } .fcol.contact .fc-h{ margin:0 0 5px; padding:0; background:none; border:none; } .fcol.contact .fc-v{ display:block; position:static; width:auto; padding:5px 0; border:none; font-size:13px; line-height:1.55; color:var(--text-1); } .fcol.contact span.fc-v{font-size:12.5px; color:var(--text-2);} /* ---------- 하단 ---------- */ .footer-bottom{padding-top:14px; gap:10px;} .fb-meta{flex-direction:column; gap:3px; font-size:11px; line-height:1.5;} } /* ========================================================================== 문의 폼 입력창 가로 넘침 방지 (PC·모바일 공통) .form-field input 에 width 선언이 없어서, 지금은 flex 의 stretch 로만 폭이 맞고 있습니다. iOS 사파리는 input 에 기본 폭(size 20자 기준)을 먼저 적용해 stretch 를 밀어내기 때문에 실기기에서만 카드 밖으로 삐져나갑니다. 폭을 명시하고 grid/flex 항목의 min-width 도 풀어줍니다. ========================================================================== */ .contact-form, #inquiryForm, .form-row, .form-field{min-width:0;} .form-field input, .form-field select, .form-field textarea, #inquiryForm input:not([type="checkbox"]):not([type="hidden"]), #inquiryForm select, #inquiryForm textarea{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; } .form-field textarea{display:block;} /* 관심 모듈 칩 상자도 같은 이유로 넘치지 않게 */ .pickbox{min-width:0; max-width:100%;}