/* ========================================================================= ev7-design.css ─ EV7lab 디자인 시스템 (단일 출처) ------------------------------------------------------------------------- 토큰·네비게이션·카드·푸터·모달까지 사이트 전체가 이 파일 하나를 쓴다. 색이나 간격은 여기 :root 토큰만 고치면 전 페이지에 반영된다. 테마 · 쿠키 ev7_theme = dark|light → (headseo.php 가 심는다) · 쿠키가 없으면 OS 의 prefers-color-scheme 를 따른다 Tailwind 로 작성된 도구 소개페이지 본문은 assets/ev7-theme.css 가 이 토큰들을 이용해 다크에서 재도색한다. ========================================================================= */ /* ── 토큰 ───────────────────────────────────────────── 라이트가 기본. 다크는 두 경로로 켜진다. · [data-theme="dark"] → 사용자가 토글로 고른 값(쿠키에 저장) · prefers-color-scheme → 고른 적이 없을 때 OS 설정을 따름 ─────────────────────────────────────────────────── */ :root{ color-scheme:light; --ev-ink:#121317; /* 거의 검정 */ --ev-ink-2:#5b5f66; --ev-ink-3:#8b9098; --ev-line:#e5e7ea; --ev-paper:#ffffff; --ev-paper-2:#f6f7f8; --ev-accent:#1a73e8; --ev-chrome:#ffffff; /* 헤더 표면 */ --ev-card:#ffffff; /* 카드 (Tailwind .bg-white) */ --ev-page:#f3f4f6; /* 도구 페이지 배경 (Tailwind .bg-gray-100) */ --ev-chrome-2:#1f2937; /* 헤더 위 드롭다운 */ --ev-chrome-line:#374151; --ev-dust:18,19,23; /* 히어로 입자 색 (rgb 성분) */ --ev-shot-dim:1; /* 다크에서 이미지 눈부심 완화용 */ --ev-ease:cubic-bezier(.22,.9,.3,1); } /* 다크 팔레트 (한 곳에서 관리) */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ev-ink:#e8eaed; --ev-ink-2:#a4abb5; --ev-ink-3:#8b929d; --ev-line:#282b31; --ev-paper:#0f1115; --ev-paper-2:#171a1f; --ev-accent:#7cb0ff; /* 헤더를 페이지 배경과 같은 색으로 두면 묻힌다 → 한 단계 밝게 */ --ev-chrome:#20242b; --ev-card:#171a1f; --ev-page:#0f1115; --ev-chrome-2:#2a2f37; --ev-chrome-line:#3a404a; --ev-dust:232,234,237; --ev-shot-dim:.86; } } :root[data-theme="dark"]{ color-scheme:dark; --ev-ink:#e8eaed; --ev-ink-2:#a4abb5; --ev-ink-3:#8b929d; --ev-line:#282b31; --ev-paper:#0f1115; --ev-paper-2:#171a1f; --ev-accent:#7cb0ff; --ev-chrome:#20242b; --ev-card:#171a1f; --ev-page:#0f1115; --ev-chrome-2:#2a2f37; --ev-chrome-line:#3a404a; --ev-dust:232,234,237; --ev-shot-dim:.86; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:Inter,'Pretendard','Malgun Gothic',sans-serif; background:var(--ev-paper); color:var(--ev-ink); -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} .wrap{max-width:1200px;margin:0 auto;padding:0 32px;} /* ── 상단바 ──────────────────────────────────────────── 기존 페이지들이 본문에 pt-24(96px) 를 두고 고정 헤더를 비켜간다. 따라서 position:fixed / 높이 64px 를 유지한다. */ .evnav{ position:fixed;top:0;left:0;right:0;z-index:60; background:color-mix(in srgb,var(--ev-chrome) 90%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--ev-line); } .evnav__wrap{ max-width:1200px;margin:0 auto;padding:0 24px; display:flex;align-items:center;gap:18px;height:64px; } .evnav__brand{ font-size:17px;font-weight:500;letter-spacing:-.02em; color:var(--ev-ink);margin-right:auto;text-decoration:none; } .evnav__brand b{font-weight:600;} .evnav__bar{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;} .evnav__bar > li{position:relative;list-style:none;} /* 알약형 트리거 — 색은 반드시 토큰으로. 하드코딩하면 다크에서 묻힌다 */ .evnav__trig{ display:inline-flex;align-items:center;gap:4px; height:36px;padding:0 15px;border:0;background:none;border-radius:9999px; font:inherit;font-size:15px;font-weight:500;color:var(--ev-ink);cursor:pointer; transition:background-color .16s var(--ev-ease),color .16s var(--ev-ease); } .evnav__trig[aria-haspopup]{padding-right:10px;} .evnav__trig:hover, .evnav__trig[aria-expanded="true"]{ background:color-mix(in srgb,var(--ev-ink) 10%,transparent); color:var(--ev-ink); } .evnav__trig:focus-visible{outline:2px solid var(--ev-accent);outline-offset:2px;} .evnav__chev{width:16px;height:16px;opacity:.65;transition:transform .2s var(--ev-ease);} .evnav__trig[aria-expanded="true"] .evnav__chev{transform:rotate(180deg);} .evnav__right{display:flex;align-items:center;gap:4px;} .evnav__burger{display:none;font-size:18px;padding:0;width:38px;justify-content:center;} /* ── 드롭다운 ── */ .evnav__panel{ position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0; min-width:300px;padding:8px; background:var(--ev-paper);border:1px solid var(--ev-line);border-radius:16px; box-shadow:0 18px 44px -16px rgba(0,0,0,.30); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s var(--ev-ease),transform .18s var(--ev-ease),visibility .18s; } .evnav__panel[data-open="1"]{opacity:1;visibility:visible;transform:none;} .evnav__panel.is-wide{min-width:520px;} .evnav__list{display:grid;grid-template-columns:1fr;gap:2px;} .evnav__panel.is-wide .evnav__list{grid-template-columns:1fr 1fr;} .evnav__list a{ display:flex;align-items:center;gap:11px; padding:9px 11px;border-radius:10px;text-decoration:none; font-size:14px;font-weight:450;color:var(--ev-ink); transition:background-color .14s var(--ev-ease); } .evnav__list a:hover{background:var(--ev-paper-2);} .evnav__list a i{ width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center; border-radius:8px;background:var(--ev-paper-2);color:var(--ev-ink-2);font-size:12px; } .evnav__list a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .evnav__all{ display:flex;align-items:center;justify-content:space-between; margin-top:6px;padding:10px 11px;border-top:1px solid var(--ev-line); font-size:13px;color:var(--ev-ink-3);text-decoration:none; } .evnav__all:hover{color:var(--ev-ink);} /* ── 모바일 ── */ @media (max-width:860px){ .evnav__bar{ position:fixed;inset:64px 0 auto 0;display:none;flex-direction:column;gap:0; padding:12px 20px 20px; background:var(--ev-paper);border-bottom:1px solid var(--ev-line); max-height:calc(100vh - 64px);overflow-y:auto; } .evnav__bar[data-open="1"]{display:flex;} .evnav__bar > li{width:100%;} .evnav__trig{width:100%;justify-content:space-between;height:46px;} .evnav__panel{ position:static;translate:none;min-width:0;box-shadow:none;border:0; padding:0 0 8px 30px;opacity:1;visibility:visible;transform:none;display:none; } .evnav__panel[data-open="1"]{display:block;} .evnav__panel.is-wide .evnav__list{grid-template-columns:1fr;} .evnav__burger{display:inline-flex;} } /* 테마 토글 (theme_toggle.php) */ .ev-theme-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;flex:0 0 36px; border:0;border-radius:9999px;background:transparent;color:var(--ev-ink); cursor:pointer;transition:background-color .16s var(--ev-ease); } .ev-theme-btn:hover{background:color-mix(in srgb,var(--ev-ink) 10%,transparent);} .ev-theme-btn:focus-visible{outline:2px solid var(--ev-accent);outline-offset:2px;} .ev-theme-btn svg{width:18px;height:18px;} .ev-theme-btn .ev-ic-moon{display:none;} :root[data-theme="dark"] .ev-theme-btn .ev-ic-sun{display:none;} :root[data-theme="dark"] .ev-theme-btn .ev-ic-moon{display:block;} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ev-theme-btn .ev-ic-sun{display:none;} :root:not([data-theme="light"]) .ev-theme-btn .ev-ic-moon{display:block;} } /* ── 히어로 : 크지만 가벼운 타이포 ───────────────────── */ .hero{position:relative;padding:120px 0 84px;text-align:center;overflow:hidden;} .hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} .hero .inner{position:relative;z-index:1;} .eyebrow{ display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--ev-ink-3);margin-bottom:28px; } .hero h1{ font-size:clamp(40px,6.2vw,78px); font-weight:450; /* 크지만 가볍게 — 이게 핵심 */ line-height:1.06; letter-spacing:-.035em; text-wrap:balance; } .hero h1 em{font-style:normal;color:var(--ev-ink-3);} .hero p{ margin:26px auto 0;max-width:560px; font-size:17px;line-height:1.65;color:var(--ev-ink-2);font-weight:400; text-wrap:pretty; } /* 알약형 버튼 */ .cta{display:flex;gap:10px;justify-content:center;margin-top:36px;flex-wrap:wrap;} .btn{ display:inline-flex;align-items:center;gap:8px; height:48px;padding:0 24px;border-radius:999px; font-size:15px;font-weight:500;transition:.18s var(--ev-ease); } .btn-dark{background:var(--ev-ink);color:var(--ev-paper);} .btn-dark:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.55);} .btn-ghost{background:var(--ev-paper-2);color:var(--ev-ink);border:1px solid var(--ev-line);} .btn-ghost:hover{background:color-mix(in srgb,var(--ev-ink) 8%,var(--ev-paper-2));} /* ── 검색 ───────────────────────────────────────────── */ .search-bar{max-width:520px;margin:44px auto 0;position:relative;} .search-bar input{ width:100%;height:52px;padding:0 20px 0 48px; border:1px solid var(--ev-line);border-radius:999px; background:var(--ev-paper-2);font:inherit;font-size:15px;color:var(--ev-ink); transition:.18s var(--ev-ease); } .search-bar input::placeholder{color:var(--ev-ink-3);} .search-bar input:focus{ outline:none;background:var(--ev-paper);border-color:var(--ev-ink); box-shadow:0 0 0 4px color-mix(in srgb,var(--ev-ink) 8%,transparent); } .search-bar svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);opacity:.4;} /* ── 업데이트 스트립 (기존 update.db 사용) ───────────── */ .updates{ display:flex;align-items:center;gap:16px; padding:16px 0;margin-top:64px; border-top:1px solid var(--ev-line);border-bottom:1px solid var(--ev-line); font-size:13.5px; } .updates .tag{ flex:0 0 auto;padding:4px 11px;border-radius:9999px; background:var(--ev-ink);color:var(--ev-paper);font-size:11px;font-weight:500;letter-spacing:.06em; } .updates .body{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;} .updates .body b{font-weight:450;color:var(--ev-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .updates .body time{flex:0 0 auto;color:var(--ev-ink-3);font-size:12px;font-variant-numeric:tabular-nums;} .updates .more{flex:0 0 auto;color:var(--ev-ink-3);font-size:13px;} .updates .more:hover{color:var(--ev-ink);} @media (max-width:640px){ .updates .body time{display:none;} } /* 히어로 안(검색창 바로 아래)에 놓이는 최신 공지 */ .hero-updates{ display:flex;align-items:center;gap:12px; max-width:560px;margin:14px auto 0;padding:9px 10px 9px 14px; border:1px solid var(--ev-line);border-radius:9999px; background:color-mix(in srgb,var(--ev-paper) 72%,transparent); font-size:13px;text-align:left; transition:border-color .18s var(--ev-ease),background-color .18s var(--ev-ease); } .hero-updates:hover{border-color:color-mix(in srgb,var(--ev-ink) 22%,var(--ev-line));background:var(--ev-paper);} .hero-updates .tag{ flex:0 0 auto;padding:3px 9px;border-radius:9999px; background:var(--ev-ink);color:var(--ev-paper);font-size:10.5px;font-weight:500;letter-spacing:.06em; } .hero-updates .body{flex:1;min-width:0;display:flex;align-items:baseline;gap:9px;} .hero-updates .body b{ font-weight:450;color:var(--ev-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .hero-updates .body time{flex:0 0 auto;color:var(--ev-ink-3);font-size:11.5px;font-variant-numeric:tabular-nums;} .hero-updates .more{flex:0 0 auto;color:var(--ev-ink-3);font-size:12px;padding-right:6px;} @media (max-width:640px){ .hero-updates .body time,.hero-updates .more{display:none;} } /* ── 섹션 ───────────────────────────────────────────── */ .section{padding:76px 0 0;} .section-head{ display:flex;align-items:baseline;justify-content:space-between; padding-bottom:18px;margin-bottom:34px;border-bottom:1px solid var(--ev-line); } .section-head h2{ font-size:34px;font-weight:450;letter-spacing:-.028em; } .section-head span{font-size:13px;color:var(--ev-ink-3);} /* ── 도구 그리드 : 이미지가 주인공 ──────────────────── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:44px 28px;} /* 카드 : 행 전체가 눌리는 느낌이 나도록 */ .item{ display:block;position:relative; padding:18px 16px 18px 0;margin-inline:-16px;padding-left:16px; border-top:1px solid var(--ev-line);border-radius:14px; transition:background-color .22s var(--ev-ease), transform .22s var(--ev-ease); } .item::after{ /* 위쪽 경계선을 악센트로 덧그린다 */ content:'';position:absolute;left:16px;right:16px;top:-1px;height:1px; background:var(--ev-ink);transform:scaleX(0);transform-origin:left; transition:transform .38s var(--ev-ease); } .item:hover,.item:focus-visible{ background:var(--ev-paper-2);transform:translateX(4px);outline:none; } .item:hover::after,.item:focus-visible::after{transform:scaleX(1);} .item .idx{transition:color .22s var(--ev-ease);} .item:hover .idx{color:var(--ev-ink);} .item .meta h3{transition:color .22s var(--ev-ease);} .meta .go{ display:inline-flex;align-items:center;gap:5px;margin-top:10px; font-size:13px;font-weight:500;color:var(--ev-ink-3);transition:.2s var(--ev-ease); } .item:hover .meta .go{color:var(--ev-accent);gap:11px;} /* ── 피처 : 대표 도구를 크게 ─────────────────────────── */ .feature{ display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center; padding:74px 0;border-bottom:1px solid var(--ev-line); } .feature.flip .fig{order:2;} .feature .fig{margin:0;} .feature .fig img{ width:100%;height:auto;display:block; /* 액자 없음 : 모서리 0, 그림자 0 */ background:var(--ev-paper-2); } .feature .lede .kicker{ display:inline-flex;align-items:center;gap:7px; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ev-ink-3); margin-bottom:18px; } .feature .lede .kicker b{ font-weight:500;color:var(--ev-ink);letter-spacing:0;text-transform:none;font-size:12px; padding:3px 9px;border-radius:9999px;background:var(--ev-paper-2); } .feature .lede h2{ font-size:clamp(28px,3.2vw,42px);font-weight:450;line-height:1.16; letter-spacing:-.03em;text-wrap:balance; } .feature .lede > p{ margin-top:18px;font-size:16px;line-height:1.75;color:var(--ev-ink-2);text-wrap:pretty; } .feature ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px;} .feature ul li{ display:flex;gap:11px;font-size:14.5px;line-height:1.6;color:var(--ev-ink-2); } .feature ul li b{font-weight:500;color:var(--ev-ink);} .feature ul li::before{ content:'';flex:0 0 5px;height:5px;margin-top:9px;border-radius:50%; background:var(--ev-ink-3); } .feature .acts{display:flex;gap:9px;margin-top:28px;flex-wrap:wrap;} @media (max-width:880px){ .feature{grid-template-columns:1fr;gap:30px;padding:52px 0;} .feature.flip .fig{order:0;} } /* ── 푸터 ─────────────────────────────────────────────── */ .evfoot{margin-top:64px;border-top:1px solid var(--ev-line);padding:64px 0 40px;background:var(--ev-paper);} .evfoot__wrap{max-width:1200px;margin:0 auto;padding:0 24px;} .evfoot__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;} .evfoot__mark{font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--ev-ink);} .evfoot__mark b{font-weight:600;} .evfoot__brand p{margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--ev-ink-2);max-width:290px;} .evfoot__sns{display:flex;gap:6px;margin-top:20px;} .evfoot__sns a{ width:36px;height:36px;display:grid;place-items:center;border-radius:9999px; border:1px solid var(--ev-line);color:var(--ev-ink-2);font-size:14px;text-decoration:none; transition:background-color .16s var(--ev-ease),color .16s var(--ev-ease),border-color .16s var(--ev-ease); } .evfoot__sns a:hover{background:var(--ev-ink);border-color:var(--ev-ink);color:var(--ev-paper);} .evfoot__col h2{ font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ev-ink-3);margin-bottom:14px; } .evfoot__col ul{list-style:none;display:grid;gap:9px;margin:0;padding:0;} .evfoot__col a{font-size:13.5px;color:var(--ev-ink-2);text-decoration:none;transition:color .14s var(--ev-ease);} .evfoot__col a:hover{color:var(--ev-ink);} .evfoot__bottom{ display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:52px;padding-top:26px;border-top:1px solid var(--ev-line); font-size:12.5px;color:var(--ev-ink-3); } .evfoot__support a{color:var(--ev-ink);font-weight:500;text-decoration:none;} .evfoot__support a:hover{text-decoration:underline;} .evfoot__support span{display:block;margin-top:4px;} @media (max-width:980px){ .evfoot__top{grid-template-columns:1fr 1fr;gap:34px;} } @media (max-width:560px){ .evfoot__top{grid-template-columns:1fr;} } /* ── 공용 모달 (약관·방침·업데이트) ──────────────────────── */ .evmodal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;} .evmodal[hidden]{display:none;} .evmodal__backdrop{position:absolute;inset:0;background:rgba(8,10,14,.55);backdrop-filter:blur(3px);} .evmodal__box{ position:relative;width:min(680px,100%);max-height:min(80vh,780px); display:flex;flex-direction:column;overflow:hidden; background:var(--ev-paper);border:1px solid var(--ev-line);border-radius:20px; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); animation:evmIn .22s var(--ev-ease) both; } @keyframes evmIn{from{opacity:0;transform:translateY(12px) scale(.985);}} .evmodal__head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 22px;border-bottom:1px solid var(--ev-line); } .evmodal__head h2{font-size:19px;font-weight:500;letter-spacing:-.02em;color:var(--ev-ink);} .evmodal__head h2 span{font-size:13px;color:var(--ev-ink-3);margin-left:7px;} .evmodal__x{ width:34px;height:34px;border:0;border-radius:9999px;background:transparent; color:var(--ev-ink-2);font-size:24px;line-height:1;cursor:pointer; } .evmodal__x:hover{background:var(--ev-paper-2);color:var(--ev-ink);} .evmodal__body{overflow-y:auto;padding:18px 22px 22px;color:var(--ev-ink-2);font-size:14px;line-height:1.75;} .evmodal__body h3{font-size:15px;font-weight:600;color:var(--ev-ink);margin:20px 0 8px;} .evmodal__body h3:first-child{margin-top:0;} .evmodal__body p{margin-bottom:14px;} .evmodal__body ul{margin:0 0 14px 18px;} .evmodal__body li{margin-bottom:6px;} .evmodal__loading{color:var(--ev-ink-3);font-size:13px;} /* 업데이트 목록 */ .ulog{list-style:none;margin:0;padding:0;} .ulog li{ display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:start; padding:15px 0;border-bottom:1px solid var(--ev-line); } .ulog li:last-child{border-bottom:0;} .ulog time{font-size:12.5px;color:var(--ev-ink-3);font-variant-numeric:tabular-nums;padding-top:2px;} .ulog b{font-size:14.5px;font-weight:500;line-height:1.5;display:block;color:var(--ev-ink);} .ulog p{margin-top:5px;font-size:13px;line-height:1.65;color:var(--ev-ink-2);} .ulog .badge{ font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:9999px; background:var(--ev-ink);color:var(--ev-paper); } @media (max-width:560px){ .ulog li{grid-template-columns:1fr auto;} .ulog time{grid-column:1/-1;} } /* ── 스크롤 반응 : 전부 CSS 스크롤 기반, JS 없음 ──────────── */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ /* 카드 등장 — 열마다 시작 지점을 달리해 계단식으로 올라온다 */ .item{ animation:rise linear both; animation-timeline:view(); animation-range:entry 2% cover 20%; } .item:nth-child(4n+2){animation-range:entry 0% cover 22%;} .item:nth-child(4n+3){animation-range:entry -2% cover 24%;} .item:nth-child(4n+4){animation-range:entry -4% cover 26%;} /* 섹션 제목 */ .section-head{ animation:rise linear both; animation-timeline:view(); animation-range:entry 4% cover 20%; } /* 제목 아래 선이 그려진다 */ .section-head{position:relative;} .section-head::after{ content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%; background:var(--ev-ink);transform-origin:left; animation:drawLine linear both; animation-timeline:view(); animation-range:entry 10% cover 32%; } /* 피처 이미지 : 스크롤에 따라 아주 천천히 밀린다 (패럴랙스) */ .feature .fig img{ animation:parallax linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; } .feature .lede{ animation:rise linear both; animation-timeline:view(); animation-range:entry 6% cover 30%; } /* 상단 스크롤 진행 막대 */ .scrollbar{ animation:progress linear both; animation-timeline:scroll(root block); } } } @keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}} @keyframes drawLine{from{transform:scaleX(0);}to{transform:scaleX(1);}} @keyframes parallax{from{transform:translateY(14px) scale(1.03);}to{transform:translateY(-14px) scale(1.03);}} @keyframes progress{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* 진행 막대 (JS 없이 스크롤 위치를 그대로 따른다) */ .scrollbar{ position:fixed;top:0;left:0;right:0;height:2px;z-index:70; background:var(--ev-ink);transform:scaleX(0);transform-origin:left; } /* ── 움직임 최소화 설정 존중 ───────────────────────────── 스크롤 반응은 전부 (prefers-reduced-motion:no-preference) 안에 있어 여기서는 호버 이동과 진행 막대만 꺼주면 된다. */ @media (prefers-reduced-motion:reduce){ .item{transition:background-color .01s;} .item:hover{transform:none;} .item::after{transition:none;} .scrollbar{display:none;} .feature .fig img{transform:none;} }