/* ========================================================================= gameTheme.css — 게임 설명 페이지 공통 디자인 업그레이드 레이어 ------------------------------------------------------------------------- 각 페이지의 기존 CSS 뒤에 불러서 겉모습만 현대적으로 끌어올린다. 마크업·클래스명·JS 는 건드리지 않는다. 적용 방법 1) 로 표시 ← 이 클래스가 있는 페이지에만 적용됨 2) 이 파일과 구글 폰트를 마지막에 추가 페이지마다 구조가 달라 공통으로 쓰이는 것들만 다룬다: header / h1~h3 / section / .container / .section / .tips / .steps .card / .btn / .lang-switch / .game-image / footer ========================================================================= */ body.hd-theme { --hd-brand: #7c3aed; --hd-brand-lt: #a78bfa; --hd-brand-dk: #5b21b6; --hd-accent: #f59e0b; --hd-accent-lt: #fbbf24; --hd-pink: #ec4899; --hd-green: #16a34a; --hd-ink: #1f2937; --hd-dim: #6b7280; --hd-line: #e5e7eb; --hd-panel: #ffffff; --hd-radius: 20px; --hd-shadow: 0 10px 30px rgba(31, 41, 55, 0.08); --hd-shadow-lg: 0 20px 45px rgba(31, 41, 55, 0.13); --hd-ease: cubic-bezier(0.22, 1, 0.36, 1); line-height: 1.75; font-family: 'Nunito', 'Noto Sans KR', system-ui, sans-serif; background-color: #eef1f8; background-image: radial-gradient(ellipse 75% 45% at 50% -5%, rgba(167, 139, 250, 0.22), transparent 62%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(245, 158, 11, 0.12), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23c7cddb' fill-opacity='.5'/%3E%3C/svg%3E"); background-attachment: fixed; -webkit-font-smoothing: antialiased; } /* 흰 패널로 바뀐 영역에만 글자색을 지정한다 (페이지 자체의 흰 글자 디자인을 건드리지 않기 위함) */ body.hd-theme section, body.hd-theme .section, body.hd-theme .game-rules, body.hd-theme .instructions, body.hd-theme .materials, body.hd-theme .game-illustration, body.hd-theme .svg-container, body.hd-theme .game-intro, body.hd-theme .game-description, body.hd-theme .rules, body.hd-theme .game-info, body.hd-theme .step, body.hd-theme .rule-item { color: var(--hd-ink); } /* ───────── 타이포 ───────── */ body.hd-theme h1, body.hd-theme h2, body.hd-theme h3, body.hd-theme h4 { font-family: 'Baloo 2', 'Jua', 'Noto Sans KR', sans-serif; line-height: 1.25; letter-spacing: -0.01em; } /* ───────── 헤더 ───────── */ body.hd-theme > header, body.hd-theme .container > header, body.hd-theme header.header, body.hd-theme .header { position: relative; margin: 0 0 22px; padding: 56px 22px 30px; text-align: center; color: #fff; border-radius: 24px; background: linear-gradient(140deg, var(--hd-brand-lt) 0%, var(--hd-brand) 55%, var(--hd-brand-dk) 100%); box-shadow: var(--hd-shadow-lg); overflow: hidden; } body.hd-theme > header::after, body.hd-theme .container > header::after, body.hd-theme .header::after { /* 은은한 광택 */ content: ''; position: absolute; inset: -40% -20% auto; height: 160%; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.28), transparent 60%); pointer-events: none; } body.hd-theme header h1, body.hd-theme .header h1 { position: relative; margin: 0 0 6px; font-size: clamp(1.8rem, 7vw, 2.7rem); color: #fff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18); } body.hd-theme header p, body.hd-theme header .subtitle, body.hd-theme .header p, body.hd-theme .header .subtitle, body.hd-theme .header > div:not([class]), body.hd-theme .header span { position: relative; margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); } /* ───────── 레이아웃 ───────── */ body.hd-theme .container, body.hd-theme .game-container { width: 100%; max-width: 880px; margin: 0 auto; padding-left: 16px; padding-right: 16px; } body.hd-theme .container > header, body.hd-theme .container > .header { /* 컨테이너 안쪽 헤더는 좌우 여백을 상쇄해 꽉 차게 */ margin-left: -16px; margin-right: -16px; } /* ───────── 패널 (섹션 / 카드 / 규칙 상자) ───────── */ body.hd-theme section, body.hd-theme .section, body.hd-theme .game-rules, body.hd-theme .instructions, body.hd-theme .materials, body.hd-theme .game-illustration, body.hd-theme .svg-container, body.hd-theme .game-intro, body.hd-theme .game-description, body.hd-theme .rules, body.hd-theme .game-info { margin: 0 0 16px; padding: 22px 20px; border-radius: var(--hd-radius); background: var(--hd-panel); border: 1px solid rgba(15, 23, 42, 0.06); box-shadow: var(--hd-shadow); } body.hd-theme section:hover, body.hd-theme .section:hover { box-shadow: var(--hd-shadow-lg); transition: box-shadow 0.25s var(--hd-ease); } /* 패널 안에 패널이 겹칠 때 이중 카드로 보이지 않도록 */ body.hd-theme section .svg-container, body.hd-theme section .game-illustration, body.hd-theme .section .svg-container, body.hd-theme .section .game-illustration, body.hd-theme .game-description .svg-container { background: #f8f9ff; box-shadow: none; border-color: #e8eaf6; } /* 섹션 제목: 왼쪽 컬러 바 */ body.hd-theme section h2, body.hd-theme .section h2, body.hd-theme .game-rules > h2, body.hd-theme .instructions > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px; font-size: clamp(1.2rem, 4.8vw, 1.5rem); color: var(--hd-ink); border-bottom: 1px solid var(--hd-line); } body.hd-theme section h2::before, body.hd-theme .section h2::before, body.hd-theme .game-rules > h2::before { content: ''; flex-shrink: 0; width: 5px; height: 1.05em; border-radius: 3px; background: linear-gradient(180deg, var(--hd-accent-lt), var(--hd-accent)); } body.hd-theme section h3, body.hd-theme .section h3 { margin: 18px 0 6px; font-size: 1.05rem; color: var(--hd-ink); } body.hd-theme section p, body.hd-theme .section p { font-size: 0.95rem; color: #4b5563; } /* ───────── 목록 ───────── */ body.hd-theme section ol, body.hd-theme section ul, body.hd-theme .section ol, body.hd-theme .section ul, body.hd-theme .instructions ol { margin: 10px 0 0; padding-left: 1.3em; } body.hd-theme section li, body.hd-theme .section li { margin-bottom: 8px; font-size: 0.94rem; color: #4b5563; } body.hd-theme section li::marker, body.hd-theme .section li::marker { color: var(--hd-brand); font-weight: 800; } /* 단계 카드 */ body.hd-theme .step, body.hd-theme .rule-item { padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: #f8f9ff; border: 1px solid #e8eaf6; } body.hd-theme .step-number { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--hd-brand-lt), var(--hd-brand)); box-shadow: 0 5px 14px rgba(124, 58, 237, 0.32); } /* 팁 상자 */ body.hd-theme .tips { padding: 20px 18px; border-radius: var(--hd-radius); background: linear-gradient(160deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0; box-shadow: var(--hd-shadow); } body.hd-theme .tips h2, body.hd-theme .tips h3 { color: #15803d; border-bottom-color: #bbf7d0; } body.hd-theme .tips li { color: #14532d; } /* ───────── 이미지 / 일러스트 ───────── */ body.hd-theme .game-image, body.hd-theme .illustration img, body.hd-theme .game-image-container img, body.hd-theme section > img, body.hd-theme .section > img { display: block; max-width: 100%; height: auto; margin: 14px auto; border-radius: 16px; box-shadow: 0 12px 30px rgba(31, 41, 55, 0.14); transition: transform 0.3s var(--hd-ease); } body.hd-theme .game-image:hover, body.hd-theme section > img:hover { transform: scale(1.02); } body.hd-theme svg { max-width: 100%; height: auto; } /* ───────── 버튼 ───────── */ body.hd-theme .btn, body.hd-theme button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--hd-brand-lt), var(--hd-brand) 60%, var(--hd-brand-dk)); box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3); transition: transform 0.18s var(--hd-ease), box-shadow 0.18s; } body.hd-theme .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124, 58, 237, 0.42); } body.hd-theme .btn:active { transform: scale(0.97); } /* ───────── 언어 전환 ───────── */ body.hd-theme .lang-switch, body.hd-theme .language-selector, body.hd-theme .language-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--hd-line); box-shadow: 0 4px 14px rgba(31, 41, 55, 0.1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.hd-theme .lang-btn, body.hd-theme .language-selector button, body.hd-theme .language-toggle button { padding: 7px 15px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 800; color: var(--hd-dim); background: transparent; transition: color 0.2s, background 0.2s; } body.hd-theme .lang-btn:hover { color: var(--hd-ink); } body.hd-theme .lang-btn.active, body.hd-theme .language-selector button.active, body.hd-theme .language-toggle button.active { color: #fff; background: linear-gradient(135deg, var(--hd-brand-lt), var(--hd-brand)); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35); } /* ───────── 푸터 ───────── */ body.hd-theme > footer, body.hd-theme .container > footer { margin-top: 24px; padding: 26px 18px 40px; text-align: center; font-size: 0.82rem; color: var(--hd-dim); } /* ───────── 홈 버튼(모든 페이지 공통 인라인 요소) 살짝 다듬기 ───────── */ body.hd-theme > div:first-child > a[href*="index.html"] { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } /* ───────── 게임별 색상 변형 ───────── 같은 레이아웃이라도 게임마다 다른 색을 쓰도록 식으로 지정한다. */ body.hd-theme.hd-rose { --hd-brand:#e11d48; --hd-brand-lt:#fb7185; --hd-brand-dk:#9f1239; --hd-accent:#fb923c; --hd-accent-lt:#fdba74; } body.hd-theme.hd-blue { --hd-brand:#2563eb; --hd-brand-lt:#60a5fa; --hd-brand-dk:#1e40af; --hd-accent:#38bdf8; --hd-accent-lt:#7dd3fc; } body.hd-theme.hd-teal { --hd-brand:#0d9488; --hd-brand-lt:#5eead4; --hd-brand-dk:#115e59; --hd-accent:#facc15; --hd-accent-lt:#fde047; } body.hd-theme.hd-green { --hd-brand:#16a34a; --hd-brand-lt:#4ade80; --hd-brand-dk:#14532d; --hd-accent:#facc15; --hd-accent-lt:#fde047; } body.hd-theme.hd-amber { --hd-brand:#d97706; --hd-brand-lt:#fbbf24; --hd-brand-dk:#92400e; --hd-accent:#f43f5e; --hd-accent-lt:#fb7185; } body.hd-theme.hd-orange { --hd-brand:#ea580c; --hd-brand-lt:#fb923c; --hd-brand-dk:#9a3412; --hd-accent:#eab308; --hd-accent-lt:#facc15; } body.hd-theme.hd-fuchsia { --hd-brand:#c026d3; --hd-brand-lt:#e879f9; --hd-brand-dk:#701a75; --hd-accent:#fb7185; --hd-accent-lt:#fda4af; } /* 색 변형에 맞춰 버튼·단계 번호 그림자도 따라가도록 */ body.hd-theme .btn { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } body.hd-theme .step-number{ box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18); } /* 페이지 자체 CSS 가 칠해둔 푸터가 테마와 부딪히지 않도록 정리 */ body.hd-theme footer, body.hd-theme .footer-text { background: transparent !important; color: var(--hd-dim) !important; border: none !important; box-shadow: none !important; } body.hd-theme footer a { color: var(--hd-brand); } /* 본문 이미지가 지나치게 커지지 않도록 */ body.hd-theme .game-image { max-width: min(100%, 420px); } /* ───────── 반응형 ───────── */ @media (max-width: 480px) { body.hd-theme > header, body.hd-theme .container > header, body.hd-theme .header { padding: 52px 16px 26px; border-radius: 0 0 22px 22px; } body.hd-theme section, body.hd-theme .section { padding: 18px 15px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { body.hd-theme *, body.hd-theme *::before, body.hd-theme *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }