/* WYD 2027 D‑Day Widget — Scoped CSS for embedding */ /* 사용법: 다른 HTML 안에 아래 HTML 조각(
…
)을 넣고, 이 CSS 파일을 에서 링크하세요. 색상 등 테마를 바꾸려면 .wyd-dday 에 선언된 CSS 변수를 덮어쓰면 됩니다. */ .wyd-dday{ /* Theme variables (Light default) */ --card:#ffffff; --border:rgba(0,0,0,.08); --accent:#22d3ee; --accent-2:#a78bfa; --text:#0f172a; /* slate-900 */ --muted:#64748b; /* slate-500 */ --good:#16a34a; /* green-600 */ --warn:#d97706; /* amber-600 */ --bad:#e11d48; /* rose-600 */ font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color:var(--text); padding-top:5px; } .wyd-dday *{ box-sizing:border-box } /* Optional Dark mode: .wyd-dday.dark 추가 시 적용 */ .wyd-dday.dark{ --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.14); --text:#e5e7eb; /* gray-200 */ --muted:#94a3b8; /* slate-400 */ } /* Layout & Card */ .wyd-dday .card{ width:min(1024px,100%); margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.08); } .wyd-dday .heading{display:flex; gap:12px; align-items:center; flex-wrap:wrap} .wyd-dday .badge{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#001018; font-weight:800; padding:6px 12px; border-radius:999px; font-size:14px; letter-spacing:.3px} .wyd-dday h1{margin:0; font-size:clamp(20px,3.4vw,32px); font-weight:800; letter-spacing:-.3px} .wyd-dday .row{display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; margin-top:16px} @media (max-width: 960px){ .wyd-dday .row{ grid-template-columns:1fr } } .wyd-dday .d-box{ background:rgba(0,0,0,.02); border:1px solid var(--border); border-radius:18px; padding:16px } .wyd-dday.dark .d-box{ background:rgba(2,6,23,.6) } /* Status & D-Day */ .wyd-dday .status{display:flex; align-items:center; gap:10px; margin-bottom:12px} .wyd-dday .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(0,0,0,0)} .wyd-dday .state{font-weight:700; letter-spacing:.2px; font-size:clamp(12px,2vw,14px)} .wyd-dday .dday{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap} .wyd-dday .dday .big{font-size:clamp(36px, 9vw, 80px); font-weight:800; line-height:1} .wyd-dday .dday .label{color:var(--muted); font-size:clamp(12px,2vw,14px)} .wyd-dday .timer{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} .wyd-dday .timer .chip{border:1px dashed var(--border); padding:8px 12px; border-radius:12px; font-variant-numeric:tabular-nums; font-size:clamp(12px,2vw,14px)} .wyd-dday .range{margin-top:12px; height:10px; background:rgba(100,116,139,.25); border-radius:999px; overflow:hidden} .wyd-dday .bar{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2))} /* Info */ .wyd-dday .info{display:grid; gap:10px} .wyd-dday .table{display:grid; grid-template-columns: 120px 1fr; font-size:clamp(12px, 2vw, 14px); gap:8px; align-items:center} @media (max-width:480px){ .wyd-dday .table{ /*grid-template-columns: 1fr */} .wyd-dday .table .k{opacity:.85} } .wyd-dday .k{color:var(--muted)} .wyd-dday .v strong{font-weight:700} /* Reduced Motion */ @media (prefers-reduced-motion: reduce){ .wyd-dday *{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important } }