/* 서울 청약 열람소 — 번외편 「복덕방 로또」 스타일 * * style.css에서 분리했습니다. 여러 세션이 공유 파일을 동시에 * 편집하는 중이라, 로또 스타일은 이 파일에만 둡니다. * * ── 통합에 필요한 것 ─────────────────────────────────── * index.html — style.css 뒤에: * * style.css의 CSS 변수(--ink · --paper · --seal · --rule · * --display · --mono · --gold 등)만 쓰고 재정의하지 않습니다. * 짝이 되는 스크립트는 assets/lotto.js 입니다. * * ── 공 색 결정 ───────────────────────────────────────── * 실제 로또 공 색(1-10 노랑 / 11-20 파랑 / …)은 즉시 알아보게 * 하지만, 이 사이트의 증서·먹빛 팔레트와 충돌한다(노랑·빨강 등 * 브랜드 밖의 색을 새로 들여야 함). 그래서 공은 전부 같은 잉크색 * (--ink 배경 · --paper 텍스트)으로 통일하고, 숫자 자체로 구분한다. * hot/cold 같은 "종류" 구분은 색이 아니라 텍스트 라벨(N회, N회 전)로 * 한다 — 색만으로 구분하지 않는다는 원칙. */ /* 목차의 부록 탭은 saju.css가 이미 .rail__t--fun으로 다뤘다. * 여기서는 lotto 전용 규칙만 추가한다(부록이 saju 하나뿐이라는 * 전제를 깨지 않도록, 클래스는 공유하고 색만 같다). */ /* ── 안내/출처 줄 ───────────────────────────────────────── */ .lotto__loading { padding: 2rem 0; color: var(--ink-soft); font-size: .9rem; } .lotto__err { border: 1px dashed var(--gold); background: rgba(168,135,62,.06); padding: clamp(1rem, 2.4vw, 1.5rem); } .lotto__err p { font-size: .87rem; line-height: 1.8; color: var(--ink-soft); max-width: 66ch; margin: 0 0 .8rem; } .lotto__err p b { color: var(--ink); } .lotto__err a { color: var(--ink); border-bottom: 1px solid var(--rule); } .lotto__err a:hover, .lotto__err a:focus-visible { color: var(--seal); border-color: var(--seal); } .lotto__manual { margin-top: 1rem; border-top: 1px dashed var(--rule); padding-top: 1rem; } .lotto__manual label { display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: .5rem; } .lotto__manual textarea { width: 100%; font-family: var(--mono); font-size: .82rem; padding: .7rem .8rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); resize: vertical; margin-bottom: .7rem; } .lottoform__err { color: var(--seal); font-size: .82rem; margin-top: .6rem; } .lottoform__err[hidden] { display: none; } .lottobtn { appearance: none; cursor: pointer; border: 0; background: var(--ink); color: var(--mint); font-family: var(--display); font-size: .95rem; font-weight: 700; padding: .7rem 1.4rem; } .lottobtn:hover, .lottobtn:focus-visible { background: var(--seal); } .lotto__src { font-size: .8rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: clamp(1.25rem, 2.6vw, 1.75rem); } .lotto__src a { color: var(--ink); border-bottom: 1px solid var(--rule); } .lotto__src a:hover, .lotto__src a:focus-visible { color: var(--seal); border-color: var(--seal); } /* ── 통계 ───────────────────────────────────────────────── */ .lottostats { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; gap: 1rem; } .statgrid { display: grid; gap: 1rem; } @media (min-width: 640px) { .statgrid { grid-template-columns: repeat(2, 1fr); } } .statcard { border: 1px solid var(--rule); background: var(--paper); padding: clamp(1rem, 2.2vw, 1.4rem); } .statcard--wide { grid-column: 1 / -1; } .statcard__cap { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; } .numrow { display: flex; flex-wrap: wrap; gap: .55rem; } .numchip { display: flex; flex-direction: column; align-items: center; gap: .15rem; border: 1px solid var(--rule); padding: .45rem .3rem .4rem; min-width: 3.6rem; } .numchip b { font-family: var(--mono); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .numchip span { font-family: var(--mono); font-size: .58rem; color: var(--ink-soft); white-space: nowrap; } /* hot·cold는 테두리 굵기+글자로 구분한다(색만으로 구분하지 않음) */ .numchip--hot { border-color: var(--seal); border-width: 2px; } .numchip--cold { border-style: dashed; } .statnote { font-size: .8rem; line-height: 1.8; color: var(--ink-soft); max-width: 68ch; margin: .3rem 0 0; } .rangebars { display: grid; gap: .55rem; } .rangebar { display: grid; grid-template-columns: 3.6rem 1fr 3rem; align-items: center; gap: .6rem; } .rangebar__k { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); } .rangebar__track { height: .55rem; background: var(--rule-soft); position: relative; } .rangebar__track i { position: absolute; inset: 0; background: var(--ink-soft); display: block; } .rangebar__n { font-family: var(--mono); font-size: .68rem; text-align: right; font-variant-numeric: tabular-nums; } .oddrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; } .oddchip { font-family: var(--mono); font-size: .66rem; color: var(--ink); border: 1px solid var(--rule); padding: .3rem .6rem; white-space: nowrap; } /* ── 번호 만들기 ────────────────────────────────────────── */ .lottopick { border-top: 2px solid var(--ink); padding-top: clamp(1.25rem, 2.6vw, 1.75rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .lottopick__cap { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; max-width: 66ch; line-height: 1.7; } .lottopick__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; } .lottochip--reroll { border-style: dashed; } .lottochip--reroll:hover { border-color: var(--ink); } .lottoresult { min-height: 12rem; } .lottoout { border: 2px solid var(--ink); background: #FBF8F1; padding: clamp(1.15rem, 2.6vw, 1.7rem); } .lottoout__strategy { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--seal); margin-bottom: .9rem; } .balls { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; } .ball { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; flex: none; } .ball--sm { width: 1.7rem; height: 1.7rem; font-size: .78rem; margin-right: .1rem; } .lottoout__prob { font-size: .85rem; line-height: 1.8; margin-bottom: 1.1rem; padding: .6rem .8rem; background: rgba(15,64,52,.05); border-left: 3px solid var(--ink); } .lottoout__prob b { font-family: var(--mono); } .lottoout__why { display: grid; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; } .lottoout__why li { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--ink-soft); } .lottoout__note { font-size: .84rem; line-height: 1.8; color: var(--ink-soft); max-width: 66ch; margin-bottom: .6rem; } .lottoout__meta { font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); } /* ── 모바일 390px — 공 6개가 한 줄에 들어가야 한다 ────────── */ @media (max-width: 420px) { .ball { width: 2.15rem; height: 2.15rem; font-size: .92rem; } .balls { gap: .4rem; } .rangebar { grid-template-columns: 3rem 1fr 2.6rem; } } /* 애니메이션이 없다시피 하지만(전환 정도), 명시적으로 존중한다. */ @media (prefers-reduced-motion: reduce) { .chip, .ball, .lottobtn { transition: none !important; } }