/* SHRI Union — 공통 스타일시트 색·폰트·레이아웃을 이 파일에서 한 번에 관리합니다. 새 페이지에는 에 다음 한 줄을 추가하세요. */ :root{ --bg:#ffffff; --panel:#f7f8fa; --ink:#16172b; --ink-2:#3f4250; --muted:#6b7280; --accent:#2a4fd4; --accent-weak:#eef1fc; --line:#e6e8ec; --line-strong:#d8dbe1; --radius:14px; --maxw:1200px; --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif; } *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;} body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow-x:hidden; word-break:keep-all; display:flex; flex-direction:column; min-height:100vh; } main{flex:1 0 auto;} a{color:inherit;text-decoration:none;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* ── 헤더 / 내비게이션 (공통) ── */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,0.92); -webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line); } .header-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px;} .logo{font-size:22px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap;} .logo .u{color:var(--accent);font-weight:700;} .nav{display:flex;align-items:center;gap:6px;} .nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;} .nav a{ display:block;padding:9px 14px;border-radius:8px; font-size:15px;font-weight:600;color:var(--ink-2); transition:background .15s ease,color .15s ease; } .nav a:hover{background:var(--accent-weak);color:var(--accent);} .nav a.active{color:var(--accent);position:relative;} .nav a.active::after{ content:"";position:absolute;left:14px;right:14px;bottom:-2px;height:2px;background:var(--accent);border-radius:2px; } .icon-btn{ display:inline-grid;place-items:center;width:40px;height:40px;border-radius:9px; border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer; transition:border-color .15s ease,color .15s ease; } .icon-btn:hover{border-color:var(--line-strong);color:var(--accent);} .menu-btn{display:none;} /* ── 홈(index) 히어로 ── */ .hero{position:relative;overflow:hidden;min-height:264px;display:flex;align-items:center;padding:16px 0;} .hero-inner{position:relative;width:100%;} .hero-bg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:50%;max-width:516px;z-index:0;pointer-events:none;} .hero-bg img{width:100%;height:auto;display:block;} .hero-left{position:relative;z-index:1;max-width:520px;} .hero h1{font-size:56px;line-height:1.05;font-weight:800;margin:0 0 12px;letter-spacing:-0.03em;} .hero .sub{font-size:20px;color:var(--ink-2);font-weight:600;margin:0 0 14px;} .hero .tagline{margin:0;color:var(--muted);font-size:17px;font-weight:500;line-height:1.55;} /* ── 홈(index) 카드 ── */ .features{padding:2px 0 10px;} .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .card{ display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--radius); padding:22px 22px 18px;background:#fff;min-height:176px; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; } .card:hover{border-color:#c4ccef;box-shadow:0 10px 28px -18px rgba(42,79,212,.35);transform:translateY(-2px);} .card .ic{color:var(--accent);margin-bottom:14px;} .card h3{font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-0.02em;} .card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;} .card .arrow{margin-top:auto;align-self:flex-end;color:var(--ink-2);transition:color .15s ease,transform .15s ease;} .card:hover .arrow{color:var(--accent);transform:translateX(3px);} /* ── 홈(index) 패널 / 공지 / 문서 ── */ .panels{padding:12px 0 16px;} .panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 24px 14px;} .panel h2{font-size:21px;font-weight:700;margin:0 0 14px;letter-spacing:-0.02em;} .notices{list-style:none;margin:0 0 6px;padding:0;} .notices li{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);} .notices li:last-child{border-bottom:0;} .notices .dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--ink-2);transform:translateY(-2px);} .notices .t{flex:1;font-size:15.5px;font-weight:500;color:var(--ink);} .notices a.t:hover{color:var(--accent);} .notices .badge-imp{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;margin-left:8px;background:#faeeda;color:#854f0b;vertical-align:1.5px;} .notices .clip{display:inline-flex;align-items:center;margin-left:6px;color:var(--muted);vertical-align:middle;} .notices a.t:hover .clip{color:var(--accent);} .notices .clip svg{flex:none;} .badge-lock{ display:inline-flex;align-items:center;gap:4px; font-size:11px;font-weight:700;line-height:1.5; padding:2px 9px;border-radius:999px; background:var(--accent-weak);color:var(--accent); border:1px solid #d4dbf5;white-space:nowrap; vertical-align:middle; } .badge-lock svg{flex:none;} .card h3 .badge-lock{margin-left:8px;} .notices .d{flex:none;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums;} .notices .empty{display:block;color:var(--muted);font-size:14.5px;padding:12px 0;border-bottom:0;} .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink);} .more:hover{color:var(--accent);} .more svg{transition:transform .15s ease;} .more:hover svg{transform:translateX(3px);} .doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px;} .doc{ display:flex;align-items:center;gap:12px; background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 16px; font-size:15px;font-weight:600;color:var(--ink-2); transition:border-color .15s ease,color .15s ease; } .doc:hover{border-color:#c4ccef;color:var(--accent);} .doc .ic{flex:none;color:var(--accent);display:inline-grid;place-items:center;} /* ── 처리방침(privacy) 히어로 ── */ .doc-hero{padding:40px 0 8px;} .crumb{font-size:13.5px;color:var(--muted);font-weight:600;margin:0 0 12px;} .crumb a:hover{color:var(--accent);} .doc-hero h1{font-size:40px;line-height:1.1;font-weight:800;margin:0 0 10px;letter-spacing:-0.03em;} .doc-hero .lead{margin:0;color:var(--ink-2);font-size:17px;font-weight:500;max-width:720px;} .doc-hero .updated{margin:14px 0 0;color:var(--muted);font-size:13.5px;} /* ── 처리방침(privacy) 본문 ── */ .policy{padding:24px 0 48px;} .policy-grid{display:grid;grid-template-columns:248px 1fr;gap:36px;align-items:start;} .toc{ position:sticky;top:96px; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:18px 20px; } .toc h2{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 12px;text-transform:none;letter-spacing:0;} .toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;} .toc li{counter-increment:toc;margin:0 0 2px;} .toc a{ display:flex;gap:10px;align-items:baseline; padding:7px 8px;border-radius:8px; font-size:14.5px;font-weight:600;color:var(--ink-2); transition:background .15s ease,color .15s ease; } .toc a:hover{background:var(--accent-weak);color:var(--accent);} .toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;} .doc-body{min-width:0;} .section{ border:1px solid var(--line);border-radius:var(--radius); padding:22px 26px;margin:0 0 16px;background:#fff; scroll-margin-top:90px; } .section h2{ font-size:20px;font-weight:700;margin:0 0 12px;letter-spacing:-0.02em; display:flex;align-items:baseline;gap:12px; } .section h2 .n{ flex:none;font-size:13px;font-weight:700;color:var(--accent); background:var(--accent-weak);border:1px solid #d4dbf5;border-radius:8px; padding:2px 9px;font-variant-numeric:tabular-nums; } .section p{margin:0 0 12px;color:var(--ink-2);font-size:15.5px;} .section p:last-child{margin-bottom:0;} .section ul{margin:0 0 12px;padding-left:0;list-style:none;} .section ul li{ position:relative;padding:7px 0 7px 18px; border-bottom:1px solid var(--line); font-size:15px;color:var(--ink);font-weight:500; } .section ul li:last-child{border-bottom:0;} .section ul li::before{ content:"";position:absolute;left:2px;top:15px; width:5px;height:5px;border-radius:50%;background:var(--ink-2); } .section ul li b{font-weight:700;color:var(--ink);} .table-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 12px;} table.collect{width:100%;border-collapse:collapse;} table.collect th,table.collect td{ text-align:left;padding:12px 16px;font-size:14.5px; border-bottom:1px solid var(--line);vertical-align:top; } table.collect tr:last-child td{border-bottom:0;} table.collect thead th{ background:var(--panel);font-weight:700;color:var(--ink);font-size:13.5px; } table.collect td{color:var(--ink-2);} table.collect td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;} .callout{ background:var(--accent-weak);border:1px solid #d4dbf5;border-radius:10px; padding:14px 16px;margin:0 0 12px; font-size:14.5px;color:var(--ink-2);line-height:1.6; } .callout b{color:var(--accent);} .contact-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin:4px 0 0;} .contact-row span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:15px;} .contact-row svg{color:var(--muted);flex:none;} .back-more{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:14.5px;font-weight:600;color:var(--ink);} .back-more:hover{color:var(--accent);} .back-more svg{transition:transform .15s ease;} .back-more:hover svg{transform:translateX(-3px);} /* ── 푸터 (공통) ── */ .site-footer{border-top:1px solid var(--line);} .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:12px 0 10px;} .copy{color:var(--muted);font-size:14px;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;} .copy .sep{width:1px;height:12px;background:var(--line-strong);} .copy .privacy{color:var(--ink-2);font-weight:600;} .copy .privacy:hover{color:var(--accent);} .meta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;} .meta span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:14px;} .meta svg{color:var(--muted);} .footer-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .footer-links a{color:var(--ink-2);font-size:14px;font-weight:600;} .footer-links a:hover{color:var(--accent);} .legal{color:var(--muted);font-size:12.5px;line-height:1.55;padding:0 0 10px;} /* ── 반응형 ── */ @media (max-width:980px){ .hero{min-height:280px;} .hero h1{font-size:48px;} .card-grid{grid-template-columns:repeat(2,1fr);} .hero-bg{width:88%;} .policy-grid{grid-template-columns:1fr;gap:18px;} .toc{position:static;top:auto;} .doc-hero h1{font-size:34px;} } @media (max-width:760px){ .wrap{padding:0 20px;} .menu-btn{display:inline-grid;} .nav{ position:absolute;left:0;right:0;top:74px; background:#fff;border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;padding:8px 14px 14px; display:none;box-shadow:0 14px 24px -18px rgba(0,0,0,.25); } .nav.open{display:flex;} .nav ul{flex-direction:column;align-items:stretch;gap:2px;} .nav a{padding:12px 12px;border-radius:8px;font-size:16px;} .nav a.active::after{display:none;} .nav a.active{background:var(--accent-weak);} .hero{min-height:auto;display:block;padding:44px 0 36px;} .hero h1{font-size:40px;} .hero-bg{right:-12%;width:120%;max-width:none;opacity:0.16;} .panel-grid{grid-template-columns:1fr;} .doc-grid{grid-template-columns:1fr 1fr;} .panel{padding:24px 22px;} .more{flex-wrap:wrap;} .footer-inner{flex-direction:column;align-items:flex-start;gap:14px;} .meta{gap:14px;} .section{padding:20px 18px;} .table-card{overflow-x:auto;} table.collect{min-width:440px;} } @media (max-width:430px){ .card-grid{grid-template-columns:1fr;} .doc-grid{grid-template-columns:1fr;} .hero h1{font-size:34px;} .hero .sub{font-size:18px;} .panel{padding:20px 18px;} } @media (prefers-reduced-motion:reduce){ *{transition:none !important;} }