/* daeryeok.cafe - production styles A warm Korean café run like a tiny experimental shop: calm, direct, and exact. Palette lives in CSS custom properties; theme switches via [data-theme] on . */ /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-padding-top: calc(84px + env(safe-area-inset-top)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } button, input, textarea, select { font: inherit; } img { max-width: 100%; display: block; } [hidden] { display: none !important; } a[href], button, summary { touch-action: manipulation; } /* ---- palette: dark ("after hours") is the default ---- */ :root { --bg: #1B1F1A; --line: rgba(242,216,167,0.045); --card: #232823; --card2: #2B312A; --milk: #342B2F; --straw: #E3A5B1; --matcha: #333D2E; --chip: #96A886; --mug: #96A886; --ink: #F2ECDF; --sub: #B8B2A4; --border: rgba(242,236,223,0.14); --shadow: rgba(0,0,0,0.5); --tape-m: rgba(150,168,134,0.4); --tape-p: rgba(227,165,177,0.35); --bulb: #F2D8A7; --bulbglow: rgba(242,216,167,0.5); --seal: #C96A5E; --signbg: #2B312A; --petal: rgba(227,165,177,0.30); --steam: rgba(242,236,223,0.45); --wx-blue: #93A7B4; } /* ---- palette: light ("daylight configuration") ---- */ [data-theme="light"] { --bg: #FAF6EE; --line: rgba(38,48,43,0.06); --card: #FFFDFA; --card2: #F3EEE2; --milk: #FBE3E8; --straw: #9B5968; --matcha: #DCEACB; --chip: #627058; --mug: #627058; --ink: #26302B; --sub: #5A5F55; --border: rgba(38,48,43,0.18); --shadow: rgba(38,48,43,0.14); --tape-m: rgba(200,227,178,0.85); --tape-p: rgba(255,190,214,0.85); --bulb: #E8E0D2; --bulbglow: rgba(0,0,0,0); --seal: #9F443E; --signbg: #FFFDFA; --petal: rgba(217,138,147,0.45); --steam: rgba(90,95,85,0.35); --wx-blue: #7C93A6; } body { background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans KR', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--straw); text-decoration: none; transition: color 0.3s; } a:hover { color: var(--ink); } /* visible keyboard focus (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [contenteditable="true"]:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--straw); outline-offset: 2px; border-radius: 4px; } /* ---- page shell: dark-olive grid ---- */ .page { min-height: 100vh; min-height: 100svh; background-color: var(--bg); background-image: repeating-linear-gradient(0deg, transparent, transparent 23px, var(--line) 23px, var(--line) 24px), repeating-linear-gradient(90deg, transparent, transparent 23px, var(--line) 23px, var(--line) 24px); color: var(--ink); transition: background-color 0.6s, color 0.6s; overflow-x: hidden; overflow-x: clip; } /* ---- nav ---- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); transition: background-color 0.6s; } .nav-scroll { display: contents; } .pill { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; white-space: nowrap; color: var(--sub); background: var(--card2); border: 1px solid var(--border); padding: 5px 12px; border-radius: 6px; transition: background-color 0.6s, color 0.3s, border-color 0.3s; } .pill:hover { color: var(--ink); border-color: var(--straw); } .pill.is-current { color: var(--ink); border-color: var(--straw); background: var(--milk); box-shadow: inset 0 -2px 0 var(--straw); } .lamp { display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; padding: 0 6px; margin-left: 10px; } .lamp-cord { display: block; width: 2px; height: 13px; background: var(--sub); opacity: 0.6; } .lamp-bulb { display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--bulb); border: 1px solid var(--border); box-shadow: 0 0 18px 4px var(--bulbglow); transition: background-color 0.6s, box-shadow 0.6s; } .lamp-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1px; color: var(--sub); margin-top: 3px; } /* ---- section scaffolding ---- */ .sec { max-width: 1060px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)) 72px max(24px, env(safe-area-inset-left)); scroll-margin-top: calc(84px + env(safe-area-inset-top)); } .sec--hero { padding: 60px max(24px, env(safe-area-inset-right)) 72px max(24px, env(safe-area-inset-left)); } .sec--clearance { padding: 0 max(24px, env(safe-area-inset-right)) 80px max(24px, env(safe-area-inset-left)); } .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .sec-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 3px; color: var(--mug); } .sec-title { font-weight: 700; font-size: 32px; letter-spacing: -0.5px; margin: 0; } .sec-title .ko { font-family: 'Gaegu', cursive; font-size: 22px; font-weight: 400; color: var(--straw); } .sec-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1px; color: var(--sub); margin-left: auto; } /* ---- hero front desk ---- */ .eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 3px; color: var(--mug); margin-bottom: 26px; } .hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; flex-wrap: wrap; } .hero-main { flex: 1 1 460px; } .hero-title { font-weight: 700; font-size: clamp(44px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -2px; margin: 0 0 6px; color: var(--ink); } .hero-title .dot { color: var(--straw); } .hero-sub { font-family: 'Gaegu', cursive; font-size: 24px; color: var(--straw); margin: 2px 0 14px; transform: rotate(-1deg); display: inline-block; } .hero-body { font-size: 15.5px; line-height: 1.75; color: var(--sub); max-width: 52ch; margin: 0 0 22px; } .cafe-handoff { width: fit-content; max-width: 100%; display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px 18px; margin: 18px 0 0 auto; padding: 11px 14px; color: var(--ink); background: var(--card2); border: 1px solid var(--border); border-left: 3px solid var(--straw); border-radius: 7px; box-shadow: 0 6px 14px -10px var(--shadow); font-family: 'IBM Plex Mono', ui-monospace, monospace; text-decoration: none; transition: transform 0.2s, border-color 0.2s, background-color 0.6s; } .cafe-handoff span { color: var(--sub); font-size: 9.5px; letter-spacing: 1px; } .cafe-handoff strong { color: var(--straw); font-size: 11px; letter-spacing: 0.7px; } .cafe-handoff:hover { transform: translateX(3px); border-color: var(--straw); } .cafe-handoff--hero { margin: -6px 0 22px; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; } .chip { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; color: var(--sub); white-space: nowrap; border: 1px solid var(--border); background: var(--card); padding: 4px 11px; border-radius: 6px; transition: background-color 0.6s; } .hero-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 26px; } .hero-seal { width: 52px; height: 52px; background: var(--seal); border-radius: 7px; transform: rotate(4deg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 8px; box-shadow: 0 4px 12px -2px var(--shadow); cursor: pointer; outline: none; } .hero-seal span { font-weight: 700; font-size: 19px; color: #F7EFE2; line-height: 1.05; text-align: center; } .hero-titlewrap { display: flex; align-items: flex-start; gap: 18px; } .door-hang { display: inline-flex; flex-direction: column; align-items: center; } .door-cord { display: block; width: 2px; height: 18px; background: var(--sub); opacity: 0.5; } .door-sign { background: var(--signbg); border: 2px solid var(--straw); border-radius: 12px; padding: 12px 26px; text-align: center; transform: rotate(-2deg); animation: signGlow 3.5s ease-in-out infinite; transition: background-color 0.6s; } .door-title { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 22px; font-weight: 600; letter-spacing: 3px; color: var(--ink); } .door-sub { font-family: 'Gaegu', cursive; font-size: 16px; color: var(--sub); margin-top: 2px; } .cup { position: relative; width: 180px; height: 150px; } .cup-steam { position: absolute; left: 26px; top: 18px; width: 110px; height: 20px; } .cup-body { position: absolute; left: 26px; bottom: 24px; width: 108px; height: 80px; background: var(--milk); border: 2px solid var(--border); border-radius: 8px 8px 24px 24px; transition: background-color 0.6s; } .cup-handle { position: absolute; left: 126px; bottom: 44px; width: 32px; height: 38px; border: 2px solid var(--border); border-left: none; border-radius: 0 18px 18px 0; } .cup-label { position: absolute; left: 40px; bottom: 52px; font-family: 'Gaegu', cursive; font-size: 16px; color: var(--ink); transform: rotate(-2deg); } .cup-unit { position: absolute; left: 38px; bottom: 34px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 1px; color: var(--sub); } .cup-saucer { position: absolute; left: 14px; bottom: 8px; width: 132px; height: 5px; background: var(--mug); border-radius: 999px; opacity: 0.55; } /* ---- cards (pastry ops + exits) ---- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px; margin-top: 30px; } .grid-exits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 30px; } .stack-logs { display: grid; gap: 14px; margin-top: 30px; } .card { position: relative; background: var(--card); border: 1px solid var(--border); box-shadow: 0 10px 22px -10px var(--shadow); transition: background-color 0.6s, transform 0.2s, border-color 0.2s; } .card:hover { transform: translateY(-4px); border-color: var(--straw); } .card--op { border-radius: 12px; padding: 24px 22px 18px; } .card--exit { border-radius: 10px; padding: 20px 18px 14px; display: block; color: var(--ink); } .op-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--mug); margin-bottom: 8px; } .op-title { font-weight: 700; font-size: 22px; margin-bottom: 8px; } .op-body { font-size: 13.5px; line-height: 1.7; color: var(--sub); margin: 0 0 16px; } .op-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .op-dest { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1px; color: var(--mug); } .card--link:hover .op-dest { color: var(--straw); } .op-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.5px; color: var(--sub); margin-top: 12px; opacity: 0.85; } .badge { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1px; padding: 3px 10px; border-radius: 5px; border: 1px solid var(--border); display: inline-block; } .badge--chip { color: var(--chip); } .badge--straw { color: var(--straw); } .badge--dashed { color: var(--sub); border: 1px dashed var(--straw); } .tape { position: absolute; border-radius: 2px; } .tape--op { top: -11px; left: 20px; width: 78px; height: 22px; } .tape--exit { top: -9px; left: 20px; width: 58px; height: 18px; } .tape--p { background: var(--tape-p); } .tape--m { background: var(--tape-m); } .exit-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 2px; color: var(--mug); display: block; margin-bottom: 6px; } .exit-name { font-weight: 700; font-size: 19px; display: block; } .exit-sub { font-size: 12px; color: var(--sub); } /* ---- reading room field logs ---- */ .log-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--matcha); border-radius: 10px; padding: 16px 20px; transition: background-color 0.6s, transform 0.2s, border-color 0.2s; } .log-row:hover { transform: translateX(6px); border-left-color: var(--chip); } .log-row--b { border-left-color: var(--milk); } .log-row--b:hover { border-left-color: var(--straw); } .log-date { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--sub); width: 92px; } .log-title { font-weight: 500; font-size: 18px; flex: 1; } .log-title .ko { font-family: 'Gaegu', cursive; font-size: 17px; color: var(--straw); } .log-badge { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1px; border: 1px solid var(--border); padding: 2px 9px; border-radius: 5px; } .log-badge--chip { color: var(--chip); } .log-badge--straw { color: var(--straw); } /* ---- personnel ---- */ .personnel-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; justify-content: center; margin-top: 30px; } .dossier-card { flex: 1 1 400px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px; box-shadow: 0 10px 22px -10px var(--shadow); transition: background-color 0.6s; } .dossier-head { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--mug); margin-bottom: 12px; } .dossier-head .aka { opacity: 0.72; } .dossier-p { font-size: 14.5px; line-height: 1.8; color: var(--sub); margin: 0 0 14px; } .dossier-p a { font-weight: 500; } .dossier-sep { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--mug); margin-bottom: 10px; border-top: 1px dashed var(--border); padding-top: 14px; } .dossier { display: grid; gap: 7px; } .dl-row { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 12px; align-items: baseline; } .dl-key { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--ink); } .dl-key--straw { color: var(--straw); } .dl-val { font-size: 13px; color: var(--sub); } .dossier-approved { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--chip); margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; } /* ---- open tabs / house ledger ---- */ .grid-disb { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; margin-top: 30px; } .disb-file { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; } .disb-photo { width: 116px; height: auto; border-radius: 8px; border: 1px solid var(--border); transform: rotate(-2deg); cursor: pointer; flex-shrink: 0; outline-offset: 3px; } .disb-photo:hover { animation: wiggle 0.55s ease; } .disb-rows { flex: 1; } .disb-rows .dl-row { grid-template-columns: minmax(96px, 122px) 1fr; } .disb-rows--solo { margin-bottom: 14px; } .disb-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.5px; color: var(--sub); margin-top: 18px; } .qc-card { flex: 0 1 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 26px 22px; transition: background-color 0.6s; } .qc-head { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--mug); margin-bottom: 14px; } .qc-photo { width: 132px; cursor: pointer; outline: none; } .qc-photo img { width: 100%; height: auto; display: block; } .qc-name { font-weight: 700; font-size: 19px; margin-top: 10px; } .qc-status { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--sub); margin-bottom: 14px; } .fund-btn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 1px; color: var(--ink); background: var(--card); border: 1px dashed var(--straw); border-radius: 7px; padding: 7px 16px; cursor: pointer; transition: background-color 0.6s; } .treat-label { font-family: 'Gaegu', cursive; font-size: 16px; color: var(--sub); margin-top: 8px; min-height: 20px; text-align: center; } .qc-card .door-hang { margin-bottom: 16px; } .qc-card .cup { margin-top: 20px; } /* ---- register / stamp card ---- */ .clearance-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 26px; box-shadow: 0 10px 22px -10px var(--shadow); margin-top: 30px; transition: background-color 0.6s; } .clearance-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } .clearance-col { flex: 1 1 340px; min-width: 0; } .clearance-col--manifest { flex: 1 1 300px; min-width: 0; } .register-order { margin: 0 0 14px; padding: 8px 10px; color: var(--mug); background: var(--card2); border: 1px dashed var(--border); border-radius: 5px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; letter-spacing: 0.8px; } .card-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; color: var(--ink); margin-bottom: 14px; } .seal-grid { display: grid; grid-template-columns: repeat(5, 54px); gap: 12px; } .seal { width: 54px; height: 54px; border-radius: 50%; border: 2px dashed var(--straw); background: transparent; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: background-color 0.4s; } .seal.is-filled { background: var(--milk); } .card-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--sub); margin-top: 14px; letter-spacing: 0.5px; line-height: 1.7; } .link-btn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; background: none; border: none; color: var(--straw); cursor: pointer; text-decoration: underline; padding: 0; letter-spacing: 0.5px; } .last-seal { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--mug); margin-top: 8px; } .manifest-input-row { display: flex; gap: 8px; } .manifest-input { flex: 1; min-width: 0; font-family: 'Gaegu', cursive; font-size: 18px; color: var(--ink); background: none; border: none; border-bottom: 2px dashed var(--border); padding: 6px 4px; outline: none; } .manifest-input { scroll-margin-top: calc(92px + env(safe-area-inset-top)); } .manifest-input::placeholder { color: var(--sub); opacity: 0.7; } .stamp-in-btn { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; color: var(--bg); background: var(--chip); border: none; border-radius: 7px; padding: 7px 16px; cursor: pointer; transition: background-color 0.6s; } .guest-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .guest-chip { max-width: 100%; overflow-wrap: anywhere; font-family: 'Gaegu', cursive; font-size: 17px; color: var(--sub); background: var(--milk); padding: 2px 12px; border-radius: 999px; transform: rotate(-1deg); transition: background-color 0.6s; } /* ---- footer ---- */ .site-footer { border-top: 1px solid var(--border); padding: 28px max(24px, env(safe-area-inset-right)) max(38px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; } .footer-name { font-weight: 700; font-size: 17px; color: var(--ink); } .footer-chop { width: 22px; height: 22px; background: var(--seal); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(4deg); font-weight: 700; font-size: 9px; color: #F7EFE2; line-height: 1; } .footer-legal { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--sub); margin-top: 10px; line-height: 1.9; letter-spacing: 0.5px; } /* ---- ambience ---- */ .petals { position: fixed; inset: 0; pointer-events: none; z-index: 40; } .petal { position: absolute; top: -24px; width: 10px; height: 10px; border-radius: 12px 2px; background: var(--petal); animation-name: petalFall; animation-timing-function: linear; animation-iteration-count: infinite; } .steam { position: absolute; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--steam); filter: blur(3px); animation: steamRise 2.8s ease-out infinite; } /* ---- hover animations (opt-in classes) ---- */ .wiggle-hover:hover { animation: wiggle 0.55s ease; } .tape-lift:hover { animation: tapelift 0.5s ease; } /* ---- keyframes ---- */ @keyframes petalFall { 0% { transform: translateY(-4vh) rotate(0deg); } 100% { transform: translateY(108vh) rotate(340deg); } } @keyframes steamRise { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(-26px) scale(1.25); } } @keyframes wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } } @keyframes tapelift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes signGlow { 0%,100% { box-shadow: 0 0 22px rgba(242,216,167,0.28); } 50% { box-shadow: 0 0 34px rgba(242,216,167,0.5); } } /* ---- responsive ---- */ @media (max-width: 640px) { .sec, .sec--hero, .sec--clearance { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .sec--hero { padding-top: 44px; } .sec-head { flex-wrap: wrap; } .sec-meta { margin-left: 0; flex-basis: 100%; } .hero-row { gap: 24px; } .hero-aside { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 20px; } .dl-row { grid-template-columns: 1fr; gap: 2px; } .dl-row { margin-bottom: 6px; } .seal-grid { grid-template-columns: repeat(5, 1fr); } .seal { width: 100%; aspect-ratio: 1; height: auto; } } /* ---- standing-orders entry point ---- */ .log-row--pinned { border-left-color: var(--straw); } .log-row--pinned:hover { border-left-color: var(--straw); } /* ---- article pages (rules + field logs) ---- */ .doc { max-width: 760px; margin: 0 auto; padding: 48px 22px 8px; } .doc-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 3px; color: var(--mug); text-transform: uppercase; } .rules-title { font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 6vw, 46px); line-height: 1.12; margin: 14px 0 0; color: var(--ink); } .rules-title .ko { font-family: 'Gaegu', cursive; font-size: 0.55em; font-weight: 400; color: var(--straw); } .rules-lede { color: var(--sub); font-size: 15px; line-height: 1.6; margin: 16px 0 0; max-width: 58ch; } .doc-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--mug); margin: 20px 0 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 10px 0; } ol.rules { list-style: none; counter-reset: none; margin: 26px 0 0; padding: 0; } .rule { display: grid; grid-template-columns: 44px 1fr; gap: 8px 16px; padding: 18px 0; border-bottom: 1px dashed var(--border); } .rule:first-child { border-top: 1px dashed var(--border); } .rule-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; font-weight: 600; color: var(--straw); padding-top: 2px; } .rule-text { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--sub); } .rule-text strong { color: var(--ink); font-weight: 700; } /* the rule sits on its own line; its note follows as a smaller, quieter gloss */ .rule-lead { display: block; } .rule-anno { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--sub); opacity: 0.8; } .rule-fifteen { margin: 28px 0 0; padding: 18px 20px; background: var(--card); border: 1px dashed var(--straw); border-radius: 10px; } .rule-fifteen .tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--mug); text-transform: uppercase; } .rule-fifteen p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 500; } /* ---- glossary (approved terminology): term · definition · dry clarifier · quote ---- */ .glossary { margin: 26px 0 0; padding: 0; } .glossary .term { padding: 20px 0; border-bottom: 1px dashed var(--border); } .glossary .term:first-child { border-top: 1px dashed var(--border); } .term-name { margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--straw); text-transform: uppercase; } .term-body { margin: 0; } .term-def { margin: 9px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; } .term-note { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sub); text-wrap: pretty; } .term-quote { margin: 12px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--straw); font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 500; text-wrap: pretty; } .doc-back { display: inline-flex; min-height: 44px; align-items: center; margin: 22px 0 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; color: var(--mug); } .doc-back:hover { color: var(--straw); } /* field-log components */ .entries { margin: 26px 0 0; } .entry { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--border); align-items: baseline; } .entry:first-child { border-top: 1px dashed var(--border); } .entry-time { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--straw); } .entry-text { font-size: 15px; line-height: 1.62; color: var(--sub); } .kit { margin: 26px 0 0; } .kit-row { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--border); align-items: baseline; } .kit-row:first-child { border-top: 1px dashed var(--border); } .kit-item { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 1px; color: var(--ink); text-transform: uppercase; } .kit-note { font-size: 14.5px; line-height: 1.62; color: var(--sub); } .site-card { margin: 18px 0 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; } .site-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--mug); } .site-name { font-weight: 700; font-size: 18px; color: var(--ink); margin: 6px 0 6px; } .site-notes { font-size: 14.5px; line-height: 1.7; color: var(--sub); margin: 0; } .site-verdict { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 1px; color: var(--chip); margin-top: 10px; } .site-verdict--withheld { color: var(--straw); } .doc-close { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: var(--mug); margin-top: 28px; border-top: 1px solid var(--border); padding-top: 14px; line-height: 1.9; } .card--link { display: block; color: var(--ink); text-decoration: none; } @media (max-width: 640px) { .entry { grid-template-columns: 52px 1fr; } .kit-row { grid-template-columns: 1fr; gap: 2px; } } /* ---- weather card - values hydrated by backend via ids ---- */ .wx { width: 288px; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 8px 18px -10px var(--shadow); transition: background-color 0.6s; } .wx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .wx-label { font-family: 'Gaegu', cursive; font-size: 16px; color: var(--straw); } .wx-station { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--mug); } .wx-scene { position: relative; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; } .wx-icon, .wx-cup { font-size: 24px; line-height: 1; } .wx-drop { position: absolute; top: 4px; width: 2px; height: 9px; border-radius: 999px; background: var(--wx-blue); opacity: 0; animation: wxRain 2.8s linear infinite; } .wx-temp { font-family: 'Gowun Batang', serif; font-size: 38px; line-height: 1.1; color: var(--ink); } .wx-headline { font-family: 'Gowun Batang', serif; font-size: 16.5px; line-height: 1.4; color: var(--ink); margin-top: 2px; } .wx-sub { font-size: 12.5px; line-height: 1.6; color: var(--sub); margin-top: 2px; } .wx-detail { font-size: 11.5px; color: var(--sub); margin-top: 10px; } .wx-metar { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.5px; line-height: 1.6; color: var(--mug); overflow-wrap: break-word; border-top: 1px dashed var(--border); margin-top: 10px; padding-top: 8px; } @keyframes wxRain { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 0.55; } 100% { transform: translateY(30px); opacity: 0; } } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- 2026-07 review: bilingual copy, resilient layout, native controls ---- */ :root { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%); padding: 9px 13px; border: 2px solid var(--straw); border-radius: 7px; background: var(--card); color: var(--ink); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.5px; transition: transform 0.18s ease; } .skip-link:focus { transform: translateY(0); } .ko-copy { display: block; color: var(--ink); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 0.94em; font-weight: 400; line-height: 1.72; letter-spacing: -0.012em; opacity: 0.74; } .ko-copy a { color: var(--straw); } .hero-body-ko { max-width: 54ch; margin: -11px 0 22px; font-size: 14.5px; } .section-note { max-width: 68ch; margin: 14px 0 0; color: var(--sub); font-size: 14px; line-height: 1.65; text-wrap: pretty; } .section-note .ko-copy { margin-top: 5px; } .op-body-ko { margin-top: -10px; color: var(--ink); opacity: 0.7; } .dossier-p.ko-copy { color: var(--ink); opacity: 0.72; } .dossier-p + .dossier-p.ko-copy { margin-top: -8px; } .dl-val .ko-copy { margin-top: 3px; font-size: 0.92em; } .hero-title, .sec-title, .rules-title { text-wrap: balance; } .hero-body, .op-body, .dossier-p, .rule-text, .entry-text, .kit-note, .site-notes { text-wrap: pretty; } .pill { flex: 0 0 auto; } .nav .lamp { flex: 0 0 auto; } .hero-seal { padding: 0; border: 0; color: inherit; font-family: inherit; } .qc-photo, .disb-photo-button { padding: 0; border: 0; background: transparent; color: inherit; } .qc-photo { border-radius: 10px; } .disb-photo-button { display: block; flex: 0 0 auto; border-radius: 8px; cursor: pointer; transform: rotate(-2deg); } .disb-photo-button .disb-photo { transform: none; } .disb-photo-button:hover { animation: wiggle 0.55s ease; } .card--pending, .log-row--pending { cursor: default; opacity: 0.7; filter: saturate(0.72); } .card.card--pending:hover { transform: none; border-color: var(--border); } .log-row--pending:hover { transform: none; border-left-color: var(--milk); } .card--pending .exit-tag, .log-row--pending .log-badge { color: var(--sub); } .tape--tilt-left { transform: rotate(-2deg); } .tape--tilt-right { transform: rotate(2deg); } .tape--tilt-hard-left { transform: rotate(-3deg); } .wx { max-width: 100%; } .wx-drop--a { left: 34%; animation-delay: 0s; } .wx-drop--b { left: 46%; animation-delay: 0.9s; } .wx-drop--c { left: 40%; animation-delay: 1.7s; } .manifest-input-row { align-items: flex-end; } .guest-status { min-height: 18px; margin-top: 8px; color: var(--sub); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.4px; } .guest-empty { color: var(--sub); font-family: 'Gaegu', cursive; font-size: 16px; opacity: 0.7; } @media (max-width: 1480px) { .nav { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; overflow: hidden; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); } .nav-scroll { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav-scroll::-webkit-scrollbar { display: none; } .nav-scroll::after { content: ''; flex: 0 0 4px; } .nav-scroll .pill { display: inline-flex; min-height: 44px; align-items: center; scroll-snap-align: start; } .nav .lamp { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin-left: 0; } .nav::after { content: none; } } @media (max-width: 520px) { html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); } .sec { scroll-margin-top: calc(72px + env(safe-area-inset-top)); } .hero-titlewrap { gap: 11px; } .hero-seal { width: 46px; height: 46px; } .hero-seal span { font-size: 17px; } .hero-sub span[lang="ko"] { display: block; margin-top: 2px; } .clearance-card { padding: 22px 18px; } .manifest-input-row { flex-wrap: wrap; } .manifest-input { flex-basis: 100%; } .stamp-in-btn { width: 100%; min-height: 42px; } .disb-file { flex-wrap: wrap; } .disb-photo-button { margin: 0 auto 4px; } .disb-rows { flex-basis: 100%; } .footer-legal { overflow-wrap: anywhere; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- bilingual field-note typography ---- */ .title-ko { display: block; margin-top: 0.25em; color: var(--straw); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 0.52em; font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; } .rules-lede-ko { margin-top: 6px; color: var(--ink); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 14px; line-height: 1.72; letter-spacing: -0.012em; opacity: 0.7; } .rule-ko, .entry-ko, .kit-ko, .site-ko { display: block; margin-top: 7px; color: var(--ink); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 0.92em; font-weight: 400; line-height: 1.72; letter-spacing: -0.012em; opacity: 0.7; } .rule-fifteen .rule-ko { font-size: 0.88em; font-weight: 400; } .entry, .kit-row { align-items: start; } .site-name-ko { display: inline-block; margin-left: 5px; color: var(--straw); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; font-size: 0.78em; font-weight: 500; letter-spacing: -0.015em; } .site-verdict span[lang="ko"] { font-family: 'IBM Plex Sans KR', system-ui, sans-serif; letter-spacing: -0.01em; } .doc-close span[lang="ko"] { color: var(--ink); font-family: 'IBM Plex Sans KR', system-ui, sans-serif; letter-spacing: -0.01em; opacity: 0.7; } /* the footer is monospace, which carries no Hangul or Han: name the CJK font explicitly */ .footer-legal span[lang="ko"], .footer-legal span[lang="zh-Hant"] { font-family: 'IBM Plex Sans KR', system-ui, sans-serif; letter-spacing: -0.01em; } @media (max-width: 640px) { .title-ko { font-size: 0.56em; } .site-name-ko { display: block; margin: 4px 0 0; } } /* bilingual companion lines in compact cards */ .exit-sub-ko, .wx-headline-ko, .wx-sub-ko { display: block; font-family: 'IBM Plex Sans KR', system-ui, sans-serif; letter-spacing: -0.012em; } .exit-sub-ko { margin-top: 3px; color: var(--ink); font-size: 0.95em; opacity: 0.68; } .wx-headline-ko { margin-top: 1px; color: var(--ink); font-size: 13.5px; line-height: 1.45; opacity: 0.74; } .wx-sub-ko { margin-top: 1px; color: var(--ink); font-size: 11.5px; line-height: 1.55; opacity: 0.66; } /* ---- sector 04: the chalkboard (shared, persistent, no questions asked) ---- */ .chalk-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 10px 22px -10px var(--shadow); margin-top: 30px; transition: background-color 0.6s; } /* the board itself is physical: dark slate in either lighting */ .chalk-boardwrap { position: relative; border: 10px solid #57452F; border-radius: 8px; background: #26302A; box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.35); } .chalk-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 50% 40%, rgba(242, 236, 223, 0.05), transparent 70%); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .chalk-canvas--live { position: absolute; inset: 0; height: 100%; background: none; pointer-events: none; } .chalk-canvas.is-drawing { cursor: crosshair; touch-action: none; } .chalk-tip { position: absolute; z-index: 2; pointer-events: none; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.5px; color: var(--ink); background: var(--card2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; white-space: nowrap; } .chalk-identity { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; padding: 4px 8px; border-left: 2px solid var(--straw); background: var(--card2); } .chalk-identity-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.7px; color: var(--ink); } .chalk-identity-link { display: inline-flex; align-items: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.6px; color: var(--mug); text-decoration-thickness: 1px; text-underline-offset: 3px; } .chalk-identity-link:hover { color: var(--ink); } .chalk-identity-link:focus-visible { outline: 2px solid var(--straw); outline-offset: 3px; } .chalk-tray { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .chalk-pickup { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 1px; color: var(--ink); background: var(--card2); border: 1px dashed var(--straw); border-radius: 7px; padding: 6px 14px; cursor: pointer; transition: background-color 0.6s; } .chalk-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chalk-tools[hidden] { display: none; } .chalk-stick { width: 34px; height: 13px; border-radius: 3px; border: 1px solid var(--border); cursor: pointer; padding: 0; } .chalk-stick--0 { background: #F2ECDF; } .chalk-stick--1 { background: #EDB2C0; } .chalk-stick--2 { background: #A9C79B; } .chalk-stick--3 { background: #9FBAD1; } .chalk-stick:nth-child(odd) { transform: rotate(-2deg); } .chalk-stick:nth-child(even) { transform: rotate(2deg); } .chalk-stick.is-active, .chalk-tool.is-active { outline: 2px solid var(--straw); outline-offset: 2px; } .chalk-tool { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--sub); background: none; border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; transition: color 0.3s, border-color 0.3s; } .chalk-tool:hover { color: var(--ink); border-color: var(--straw); } .chalk-status { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--sub); margin-left: auto; } /* the sign on the door picked up a second, smaller line */ .door-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.5px; color: var(--sub); margin-top: 4px; text-align: center; opacity: 0.85; } /* chalkboard whistles: more chalks, sizes, live tags, dust, the wash sweep */ .chalk-boardwrap { overflow: hidden; } .chalk-stick--4 { background: #EFD9A7; } .chalk-stick--5 { background: #C4B5E0; } .chalk-sizes { display: inline-flex; align-items: center; gap: 4px; } .chalk-size { width: 22px; height: 22px; padding: 0; cursor: pointer; background: none; border: 1px solid var(--border); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; } .chalk-size::after { content: ''; display: block; border-radius: 50%; background: var(--sub); } .chalk-size--0::after { width: 3px; height: 3px; } .chalk-size--1::after { width: 6px; height: 6px; } .chalk-size--2::after { width: 10px; height: 10px; } .chalk-size.is-active { outline: 2px solid var(--straw); outline-offset: 2px; } .chalk-size.is-active::after { background: var(--ink); } .chalk-livetag { position: absolute; z-index: 2; pointer-events: none; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; font-family: 'Gaegu', cursive; font-size: 15px; color: rgba(242, 236, 223, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); white-space: nowrap; transition: left 0.08s linear, top 0.08s linear; } .chalk-dust { position: absolute; z-index: 1; pointer-events: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(242, 236, 223, 0.5); filter: blur(1px); transform: translate(-50%, -50%); animation: chalkDust 0.9s ease-out forwards; } @keyframes chalkDust { from { opacity: 0.8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(calc(-50% + var(--dust-dx, 8px)), calc(-50% - 26px)) scale(2.2); } } .chalk-wipe { position: absolute; top: 0; bottom: 0; left: -25%; width: 22%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(242, 236, 223, 0) 0%, rgba(242, 236, 223, 0.08) 45%, rgba(20, 26, 22, 0.35) 55%, rgba(242, 236, 223, 0) 100%); animation: chalkWipe 0.55s ease-in-out forwards; } @keyframes chalkWipe { from { left: -25%; } to { left: 105%; } } @media (prefers-reduced-motion: reduce) { .chalk-dust, .chalk-wipe { animation: none; display: none; } .chalk-livetag { transition: none; } } /* ---- sector 05: the sticker board (global by default, private available) ---- */ .diary-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 10px 22px -10px var(--shadow); margin-top: 30px; transition: background-color 0.6s; } .diary-modebar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; padding: 11px 12px; background: var(--card2); border: 1px dashed var(--border); border-radius: 8px; } .diary-mode-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; } .diary-share-status { min-height: 14px; overflow-wrap: anywhere; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; line-height: 1.45; letter-spacing: 0.7px; color: var(--mug); } .diary-share-status.is-error { color: var(--straw); } .diary-mode-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: 6px; } .diary-mode-btn { min-height: 34px; padding: 7px 10px; color: var(--sub); background: transparent; border: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; line-height: 1.35; letter-spacing: 0.7px; cursor: pointer; } .diary-mode-btn + .diary-mode-btn { border-left: 1px solid var(--border); } .diary-mode-btn[aria-pressed="true"] { color: var(--ink); background: var(--matcha); box-shadow: inset 0 -2px 0 var(--mug); } .diary-mode-btn:focus-visible { position: relative; z-index: 1; outline-offset: -3px; } /* the page itself is physical: cream paper in either lighting */ .diary-page { position: relative; overflow: hidden; min-height: 340px; border-radius: 6px; background-color: #F7F1E3; background-image: linear-gradient(90deg, transparent 46px, rgba(201,106,94,0.35) 46px, rgba(201,106,94,0.35) 47px, transparent 47px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(38,48,43,0.09) 25px, rgba(38,48,43,0.09) 26px); box-shadow: inset 0 0 30px rgba(38,48,43,0.08); } .diary-page::after { position: absolute; z-index: 8; top: 10px; right: 10px; padding: 4px 7px; border: 1px solid rgba(38, 48, 43, 0.2); border-radius: 3px; pointer-events: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 7.5px; line-height: 1; letter-spacing: 0.8px; color: #26302B; background: rgba(247, 241, 227, 0.88); } .diary-page[data-diary-mode="global"]::after { content: 'GLOBAL · SHARED WITH EVERYONE'; } .diary-page[data-diary-mode="private"]::after { content: 'PRIVATE · THIS DEVICE ONLY'; } .diary-polaroid { position: absolute; left: 6%; top: 8%; width: 124px; background: #FFFDFA; padding: 9px 9px 4px; border-radius: 3px; box-shadow: 0 8px 18px -6px rgba(38,48,43,0.45); transform: rotate(-3deg); } .diary-polaroid img { width: 100%; height: auto; } .diary-polaroid-caption { font-family: 'Gaegu', cursive; font-size: 17px; color: #26302B; text-align: center; padding: 2px 0 4px; } .diary-polaroid.is-nomming { animation: polaroidNom 0.45s ease; } @keyframes polaroidNom { 0% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(-1deg) scale(1.09); } 100% { transform: rotate(-3deg) scale(1); } } .diary-item { position: absolute; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .diary-item--shared-view { cursor: default; touch-action: auto; pointer-events: none; } .diary-item.is-held { cursor: grabbing; z-index: 5; filter: drop-shadow(0 6px 8px rgba(38,48,43,0.3)); } .diary-item--emoji { font-size: 30px; line-height: 1; } .diary-item--stamp { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1px; color: rgba(159,68,62,0.9); border: 1.5px solid rgba(159,68,62,0.65); border-radius: 4px; padding: 3px 8px; background: rgba(255,253,250,0.55); white-space: nowrap; } .diary-item--washi { display: inline-block; width: 110px; height: 22px; border-radius: 2px; opacity: 0.93; box-shadow: 0 2px 5px rgba(38,48,43,0.18); } .washi--straw { background: repeating-linear-gradient(45deg, #EDB2C0 0 8px, #F7EFE2 8px 16px); } .washi--matcha { background-color: #DCEACB; background-image: radial-gradient(rgba(95,112,80,0.7) 2px, transparent 2.6px); background-size: 12px 12px; } .washi--grid { background-color: #F3EEE2; background-image: linear-gradient(rgba(90,95,85,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(90,95,85,0.3) 1px, transparent 1px); background-size: 8px 8px; } .washi--milk { background-color: #FBE3E8; background-image: linear-gradient(180deg, transparent 44%, rgba(227,165,177,0.55) 44% 56%, transparent 56%); } .washi--gold { background: repeating-linear-gradient(45deg, #E3C878 0 6px, #F4E6C0 6px 12px); box-shadow: 0 0 10px rgba(232,201,122,0.55); } .diary-ghost { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); font-size: 30px; line-height: 1; opacity: 0.85; } .diary-tray { margin-top: 16px; } .diary-tray-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .diary-tray-row .card-label { margin-bottom: 0; } .diary-tray-row .link-btn { margin-left: auto; } .diary-note { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--sub); } .diary-stickers { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; } .diary-tray-item { background: var(--card2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; font-size: 22px; line-height: 1.2; cursor: grab; touch-action: manipulation; transition: border-color 0.3s; } .diary-tray-item:hover { border-color: var(--straw); } .diary-tray-item--stamp { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1px; color: var(--straw); } .diary-tray-item--washi { padding: 8px; } .diary-tray-item--washi .diary-item--washi { width: 64px; height: 14px; box-shadow: none; } .fortune-slip { margin-top: 12px; max-width: 250px; text-align: left; background: var(--card); border: 1px dashed var(--straw); border-radius: 8px; padding: 12px 14px; } .fortune-text { font-family: 'Gaegu', cursive; font-size: 17px; line-height: 1.5; color: var(--ink); white-space: pre-line; } .fortune-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1px; color: var(--mug); margin-top: 8px; } .fortune-slip.is-settling { animation: fortuneSettle 0.5s ease; } @keyframes fortuneSettle { from { opacity: 0; transform: translateY(-6px) rotate(-1deg); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .diary-polaroid.is-nomming, .fortune-slip.is-settling { animation: none; } } /* ---- sector 01: the pastry case, repurposed as the comfort counter ---- */ .case-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 10px 22px -10px var(--shadow); margin-top: 30px; transition: background-color 0.6s; } .case-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: 12px; } .case-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 55%), var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 16px 10px 12px; cursor: pointer; transition: transform 0.2s, border-color 0.2s, background-color 0.6s; } .case-item:hover { transform: translateY(-3px); border-color: var(--straw); } .case-item-emoji { font-size: 34px; line-height: 1; } .case-item-name { font-family: 'Gaegu', cursive; font-size: 15px; color: var(--ink); text-align: center; } .case-item-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 1px; border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; white-space: nowrap; } .case-item-tag--special { color: var(--straw); border-color: var(--straw); } .case-item-tag--usual { color: var(--chip); border-color: var(--chip); } .case-plate { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 18px; } .case-plate.is-serving { animation: fortuneSettle 0.5s ease; } .case-plate-food { position: relative; flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #FFFDFA 62%, #EDE6D6 63%, #FFFDFA 70%); box-shadow: 0 8px 16px -6px var(--shadow), inset 0 0 0 1px rgba(38, 48, 43, 0.12); display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1; } .case-steam { position: absolute; top: -10px; left: 14px; width: 60px; height: 26px; pointer-events: none; } .case-plate-body { flex: 1 1 260px; } .case-plate-name { font-family: 'Gaegu', cursive; font-size: 19px; color: var(--straw); } .case-plate-note { font-family: 'Gaegu', cursive; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 48ch; margin-top: 2px; } .case-plate-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1px; color: var(--mug); margin-top: 8px; } .case-plate .link-btn { margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .case-plate.is-serving { animation: none; } .case-item:hover { transform: none; } } /* ---- sector 03: the window seat (rain, stereo, dice, sugar packet) ---- */ .seat-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 10px 22px -10px var(--shadow); margin-top: 30px; transition: background-color 0.6s; } .seat-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; } /* A painted still carries the scene; code supplies weather, glass, light, and steam. */ .seat-pane-wrap { --scene-brightness: 1.02; --scene-saturation: 0.98; --scene-contrast: 1; --scene-top: rgba(159, 183, 196, 0.08); --scene-bottom: rgba(126, 145, 137, 0.08); --scene-horizon: rgba(242, 216, 167, 0.08); --scene-reflection: 0.2; /* Mirrored by EXTERIOR_PANE in seat.js. The lower edge leaves a dry reveal above the interior sill so falling drops never appear to land indoors. */ --seat-window-mask: polygon( 0% 0%, 55.2% 0%, 55.2% 53.9%, 54.8% 54.4%, 54.3% 55.3%, 54.1% 56.5%, 54.1% 59.9%, 17.6% 75.4%, 14.4% 52%, 0% 52.9% ); position: relative; isolation: isolate; flex: 1 1 300px; min-width: 0; min-height: 0; aspect-ratio: 4 / 3; border: 10px solid #57452F; border-radius: 8px; background: linear-gradient(180deg, #566873 0%, #303c42 72%, #241f20 100%); box-shadow: inset 0 0 44px rgba(0, 0, 0, 0.4), 0 8px 18px -12px var(--shadow); overflow: hidden; contain: paint; } .seat-scene, .seat-scene img, .seat-timewash, .seat-pane, .seat-glass { position: absolute; inset: 0; width: 100%; height: 100%; } .seat-scene { z-index: 0; display: block; overflow: hidden; } .seat-scene img { display: block; object-fit: cover; object-position: center; filter: brightness(var(--scene-brightness)) saturate(var(--scene-saturation)) contrast(var(--scene-contrast)); transition: filter 12s linear; } .seat-timewash { z-index: 1; pointer-events: none; background: radial-gradient(75% 48% at 50% 45%, var(--scene-horizon), transparent 72%), linear-gradient(180deg, var(--scene-top), var(--scene-bottom)); mix-blend-mode: color; transition: background 12s linear; } .seat-pane { z-index: 2; display: block; pointer-events: none; } .seat-pane, .seat-glass { -webkit-clip-path: var(--seat-window-mask); clip-path: var(--seat-window-mask); } .seat-glass { z-index: 3; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,0.10) 0%, transparent 19%, transparent 70%, rgba(147,167,180,0.08) 100%), radial-gradient(ellipse at center, transparent 50%, rgba(9,14,18,0.26) 100%); box-shadow: inset 0 0 34px rgba(5, 10, 13, 0.22); } .seat-glass::before { content: ''; position: absolute; top: -35%; bottom: -35%; left: -28%; width: 18%; background: linear-gradient(90deg, transparent, rgba(242,236,223,0.14), transparent); opacity: var(--scene-reflection); transform: skewX(-12deg) translateX(-180%); animation: seatGlassDrift 16s ease-in-out infinite; } .seat-glass::after { content: ''; position: absolute; inset: -3%; background: radial-gradient(ellipse at 62% 67%, rgba(242,236,223,0.08), transparent 21%), radial-gradient(ellipse at center, transparent 43%, rgba(221,232,231,0.06) 72%, rgba(221,232,231,0.15) 100%); filter: blur(3px); opacity: 0.72; } @keyframes seatGlassDrift { 0%, 18% { transform: skewX(-12deg) translateX(-180%); } 72%, 100% { transform: skewX(-12deg) translateX(790%); } } .seat-cup-steam { position: absolute; z-index: 4; pointer-events: none; left: 56.8%; top: 34%; width: 18.4%; height: 23.2%; min-width: 26px; } .seat-steam-wisp { position: absolute; bottom: 0; left: var(--steam-left, 30%); width: 20%; height: 48%; border-radius: 48% 52% 46% 54%; background: radial-gradient(ellipse at 46% 78%, rgba(255,250,239,0.34) 0 12%, rgba(255,250,239,0.15) 34%, transparent 68%), radial-gradient(ellipse at 58% 36%, rgba(255,250,239,0.2) 0 10%, rgba(255,250,239,0.08) 32%, transparent 66%); filter: blur(clamp(2.2px, 0.45vw, 4.5px)); opacity: 0; transform-origin: 50% 100%; animation: seatSteamDrift var(--steam-duration, 6s) ease-out var(--steam-delay, 0s) infinite; } .seat-steam-wisp::after { content: ''; position: absolute; inset: 20% 15% 4%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255,250,239,0.18) 48%, transparent); filter: blur(2px); } @keyframes seatSteamDrift { 0% { opacity: 0; transform: translate3d(0, 12%, 0) scale(0.68, 0.52); } 16% { opacity: 0.32; } 46% { opacity: 0.23; transform: translate3d(-18%, -10%, 0) scale(0.9, 1.02); } 72% { opacity: 0.11; transform: translate3d(20%, -34%, 0) scale(1.08, 1.22); } 100% { opacity: 0; transform: translate3d(-8%, -62%, 0) scale(1.22, 1.42); } } .seat-window-status { position: absolute; z-index: 5; left: 9px; bottom: 8px; max-width: calc(100% - 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border: 1px solid rgba(242,236,223,0.16); border-radius: 4px; background: rgba(15, 21, 24, 0.46); color: rgba(242,236,223,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.7px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } @media (prefers-reduced-motion: reduce) { .seat-scene img, .seat-timewash { transition: none; } .seat-glass::before { animation: none; transform: skewX(-12deg) translateX(320%); } .seat-steam-wisp { animation: none; opacity: 0; } .seat-steam-wisp:first-child { opacity: 0.14; transform: translate3d(0, -18%, 0) scale(0.9, 1.08); } } .seat-stereo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .seat-stereo > .card-label { margin-bottom: 0; } .stereo-source, .stereo-share-as, .stereo-status { max-width: 100%; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; line-height: 1.55; letter-spacing: 0.65px; color: var(--sub); overflow-wrap: anywhere; } .stereo-source { color: var(--mug); } .stereo-slot { width: 100%; min-width: 0; } .stereo-frame { width: 100%; max-width: 420px; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 8px; display: block; } .stereo-shared { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); } .stereo-shared[hidden] { display: none; } .stereo-shared-copy { min-width: 0; display: grid; gap: 3px; } .stereo-shared-copy .card-label { margin: 0; font-size: 9.5px; } .stereo-shared-copy > :last-child { font-family: 'Gaegu', cursive; font-size: 15px; line-height: 1.25; color: var(--sub); overflow-wrap: anywhere; } .stereo-shared .link-btn { flex: 0 0 auto; text-align: right; } .stereo-controls { width: 100%; min-width: 0; border-top: 1px dashed var(--border); padding-top: 2px; } .stereo-controls > summary { width: fit-content; min-height: 36px; display: flex; align-items: center; cursor: pointer; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.8px; color: var(--straw); } .stereo-controls > summary::marker { color: var(--straw); } .stereo-form { min-width: 0; display: grid; gap: 8px; padding-top: 6px; } .stereo-form .card-label { margin: 0; font-size: 9.5px; } .stereo-url { width: 100%; min-width: 0; box-sizing: border-box; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.4; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; outline: none; transition: background-color 0.6s, border-color 0.2s; } .stereo-url::placeholder { color: var(--sub); opacity: 0.68; } .stereo-url:focus { border-color: var(--straw); } .stereo-url[aria-invalid="true"] { border-color: var(--seal); } .stereo-actions { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stereo-actions .fund-btn { min-width: 0; min-height: 38px; padding: 7px 8px; white-space: normal; line-height: 1.35; font-size: 10px; letter-spacing: 0.6px; } .stereo-reset { margin-top: 9px; } .stereo-controls .diary-note { margin-top: 10px; } .stereo-share-as { margin-top: 7px; font-size: 8.5px; } .stereo-status { min-height: 15px; margin-top: 7px; color: var(--mug); } .seat-table { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 16px; } .seat-table-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; } .dice-block { flex: 1 1 360px; display: flex; gap: 18px; align-items: flex-start; } .dice-stage { flex: 0 0 104px; display: grid; justify-items: center; gap: 5px; } .dice-face { position: relative; isolation: isolate; width: 100px; height: 100px; padding: 3px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .dice-face::after { content: ''; position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 2px; height: 10px; border-radius: 50%; background: rgba(0,0,0,0.34); filter: blur(4px); transition: transform 0.18s ease, opacity 0.18s ease; } .dice-poly { position: relative; z-index: 1; width: 94px; height: 94px; overflow: visible; transform-origin: 50% 62%; filter: drop-shadow(0 5px 4px rgba(0,0,0,0.38)); transition: transform 0.18s ease, filter 0.18s ease; } .dice-facet { stroke: rgba(226,216,198,0.38); stroke-width: 1.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .dice-facet--nw { fill: #292B28; } .dice-facet--ne { fill: #20221F; } .dice-facet--e { fill: #141614; } .dice-facet--s { fill: #090A09; } .dice-facet--w { fill: #181A18; } .dice-facet--front { fill: #101210; } .dice-outline { fill: none; stroke: #8A857B; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .dice-num { fill: #F2ECDF; stroke: rgba(0,0,0,0.52); stroke-width: 0.8px; paint-order: stroke fill; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 27px; font-weight: 700; letter-spacing: -1px; pointer-events: none; } .dice-prompt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 7.5px; line-height: 1.25; max-width: 100%; letter-spacing: 0.7px; color: var(--sub); text-align: center; } .dice-face:hover .dice-poly { transform: translateY(-3px) rotate(-3deg); filter: drop-shadow(0 8px 5px rgba(0,0,0,0.44)); } .dice-face:hover::after { transform: scaleX(0.9); opacity: 0.76; } .dice-face:active .dice-poly { transform: translateY(1px) scale(0.97); } .dice-face:focus-visible { outline: 2px solid var(--straw); outline-offset: 3px; } .dice-face.is-rolling .dice-poly { animation: d12Tumble 675ms cubic-bezier(0.22, 0.72, 0.28, 1) both; } .dice-face.is-rolling::after { animation: d12Shadow 675ms ease both; } @keyframes d12Tumble { 0% { transform: translate3d(0,0,0) rotate(0) scale(1); } 24% { transform: translate3d(-3px,-10px,0) rotate(-18deg) scale(1.04); } 52% { transform: translate3d(3px,-4px,0) rotate(13deg) scale(0.99); } 76% { transform: translate3d(-1px,-2px,0) rotate(-5deg) scale(1.015); } 88% { transform: translate3d(0,-1px,0) rotate(2deg); } 100% { transform: translate3d(0,0,0) rotate(0) scale(1); } } @keyframes d12Shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 28% { transform: scaleX(0.68); opacity: 0.48; } 62% { transform: scaleX(0.9); opacity: 0.8; } } .dice-side { flex: 1; min-width: 200px; } .dice-side > .card-label { margin-bottom: 7px; } .dice-result { margin-top: 10px; min-height: 66px; padding: 10px 12px; background: color-mix(in srgb, var(--card2) 72%, transparent); border: 1px solid var(--border); border-left: 3px solid var(--mug); border-radius: 4px 9px 9px 4px; } .dice-result-label { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; line-height: 1.3; letter-spacing: 1px; color: var(--mug); } .dice-result-copy { display: block; margin-top: 4px; font-family: 'Gaegu', cursive; font-size: 17px; line-height: 1.42; color: var(--ink); } .dice-result[data-state="rolling"] { border-left-color: var(--straw); } .dice-result[data-state="rolling"] .dice-result-label { color: var(--straw); } .dice-action { display: inline-block; margin-top: 8px; } .dice-action[hidden] { display: none; } .dice-table { margin-top: 8px; } .dice-table summary { cursor: pointer; } .dice-list { font-family: 'Gaegu', cursive; font-size: 15.5px; color: var(--sub); line-height: 1.6; margin: 8px 0 0; padding-left: 22px; } .sugar-block { flex: 0 1 310px; min-width: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; padding-bottom: 20px; } .sugar-packet { position: relative; isolation: isolate; width: 132px; height: 106px; padding: 0; border: 0; border-radius: 5px; color: #57452F; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .sugar-packet-paper { position: absolute; inset: 0; display: block; transition: opacity 0.14s ease, transform 0.14s ease; } .sugar-packet-inside { position: absolute; z-index: 1; left: 4%; right: 4%; top: 24%; height: 49%; display: flex; align-items: flex-start; justify-content: center; padding-top: 1px; background: repeating-linear-gradient(96deg, rgba(87,69,47,0.025) 0 1px, transparent 1px 7px), #FFF9E9; border: 1px solid rgba(87,69,47,0.32); border-radius: 2px; box-shadow: inset 0 0 10px rgba(87,69,47,0.08); opacity: 0; transform: scale(0.74) rotate(-2deg); } .sugar-answer-print { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: 2px; color: #627058; text-shadow: 0.5px 0 rgba(87,69,47,0.28); } .sugar-packet[data-answer="no"] .sugar-answer-print { color: #9F443E; } .sugar-packet-body, .sugar-packet-tab { position: absolute; left: 0; width: 100%; background-color: #F7EDDA; background-image: linear-gradient(108deg, transparent 0 72%, rgba(227,165,177,0.72) 73% 82%, transparent 83%), repeating-linear-gradient(96deg, rgba(87,69,47,0.035) 0 1px, transparent 1px 7px); border: 1px solid rgba(87,69,47,0.45); } .sugar-packet-body { z-index: 2; top: 27%; height: 66%; clip-path: polygon( 0 11%, 5% 0, 10% 10%, 15% 0, 20% 11%, 25% 1%, 30% 10%, 35% 0, 40% 11%, 45% 1%, 50% 10%, 55% 0, 60% 11%, 65% 1%, 70% 10%, 75% 0, 80% 11%, 85% 1%, 90% 10%, 95% 0, 100% 11%, 100% 100%, 0 100% ); box-shadow: 0 7px 12px -7px rgba(38,48,43,0.48), inset 0 -5px 8px rgba(87,69,47,0.05); transform-origin: 28% 8%; } .sugar-packet-tab { z-index: 3; top: 6%; height: 28%; clip-path: polygon( 0 0, 100% 0, 100% 79%, 95% 100%, 90% 82%, 85% 100%, 80% 81%, 75% 100%, 70% 82%, 65% 100%, 60% 81%, 55% 100%, 50% 82%, 45% 100%, 40% 81%, 35% 100%, 30% 82%, 25% 100%, 20% 81%, 15% 100%, 10% 82%, 5% 100%, 0 80% ); box-shadow: 0 2px 3px rgba(87,69,47,0.12); transform-origin: 16% 82%; } .sugar-packet-tear { position: absolute; left: 9px; right: 9px; top: 7px; padding-bottom: 3px; border-bottom: 1px dashed rgba(87,69,47,0.45); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 6.5px; line-height: 1; letter-spacing: 1.2px; text-align: right; } .sugar-packet-qc { position: absolute; left: 9px; top: 18px; width: 20px; height: 20px; border: 1px solid #627058; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 7px; font-weight: 600; color: #627058; transform: rotate(-7deg); } .sugar-packet-name { position: absolute; left: 36px; top: 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: 1.4px; } .sugar-packet-ko { position: absolute; left: 37px; top: 34px; font-family: 'Gaegu', cursive; font-size: 13px; line-height: 1; color: #7C674B; } .sugar-packet-brand { position: absolute; left: 9px; right: 9px; bottom: 6px; overflow: hidden; white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 5.7px; line-height: 1; letter-spacing: 0.6px; color: #7C674B; } .sugar-packet-grains { position: absolute; z-index: 4; left: 67%; top: 35%; width: 3px; height: 3px; border-radius: 45%; background: #FFF8E4; box-shadow: 8px 2px #F3E5C9, 15px -2px #FFF8E4, 20px 5px #F3E5C9; opacity: 0; pointer-events: none; } .sugar-packet.is-torn .sugar-packet-body { animation: sugarPacketBodyTear 0.62s cubic-bezier(0.2, 0.75, 0.2, 1) both; } .sugar-packet.is-torn .sugar-packet-tab { animation: sugarPacketTabTear 0.62s cubic-bezier(0.18, 0.78, 0.28, 1) both; } .sugar-packet.is-torn .sugar-packet-inside { animation: sugarPacketAnswer 0.62s ease both; } .sugar-packet.is-torn .sugar-packet-grains { animation: sugarPacketSpill 0.62s ease-out both; } .sugar-packet.is-resetting .sugar-packet-paper { opacity: 0; transform: scale(0.92) rotate(2deg); } @keyframes sugarPacketBodyTear { 0%, 14% { transform: translateY(0) rotate(0); } 22% { transform: translate(-1px, 1px) scale(0.985, 1.02) rotate(-0.4deg); } 36% { transform: translate(1px, 0) rotate(0.7deg); } 100% { transform: translateY(34%) rotate(-1.2deg); } } @keyframes sugarPacketTabTear { 0%, 18% { transform: translate(0) rotate(0); } 30% { transform: translate(-1px, 1px) rotate(-1deg); } 100% { transform: translate(-8%, -45%) rotate(-9deg); } } @keyframes sugarPacketAnswer { 0%, 43% { opacity: 0; transform: scale(0.74) rotate(-2deg); } 72%, 100% { opacity: 1; transform: scale(1) rotate(-1deg); } } @keyframes sugarPacketSpill { 0%, 46% { opacity: 0; transform: translate(0) rotate(0); } 58% { opacity: 0.9; } 100% { opacity: 0; transform: translate(15px, 24px) rotate(80deg); } } .sugar-copy { min-width: 0; } .sugar-copy .card-label { margin-bottom: 5px; } .sugar-note { font-family: 'Gaegu', cursive; font-size: 16.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } @media (hover: hover) { .sugar-packet:hover .sugar-packet-paper { transform: translateY(-2px) rotate(-0.6deg); } .sugar-packet.is-torn:hover .sugar-packet-paper { transform: none; } } /* ---- sector 08: the bottom drawer (four pieces for after hours) ---- */ .sec--letters { padding-bottom: 80px; } .letter-drawer { --drawer-paper: #F3E9D4; --drawer-paper-rose: #EED8D3; --drawer-receipt: #F1EFE7; --drawer-ink: #40372F; --drawer-sub: #65584D; --drawer-line: rgba(79, 61, 45, 0.2); position: relative; max-width: 900px; margin: 30px auto 0; padding: 18px clamp(14px, 2.6vw, 26px) 26px; color: var(--drawer-ink); background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 18%, transparent 82%, rgba(0,0,0,0.16)), repeating-linear-gradient(3deg, transparent 0 24px, rgba(255,255,255,0.025) 25px 26px), #3E3028; border: 1px solid #725A48; border-radius: 16px 16px 11px 11px; box-shadow: inset 0 12px 24px rgba(0,0,0,0.28), 0 18px 34px -18px var(--shadow); } [data-theme="light"] .letter-drawer { background: linear-gradient(90deg, rgba(255,255,255,0.1), transparent 18%, transparent 82%, rgba(56,38,26,0.1)), repeating-linear-gradient(3deg, transparent 0 24px, rgba(255,255,255,0.05) 25px 26px), #725844; } .letter-drawer-front { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 150px) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 36px; color: #E8DCC8; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 1.1px; } .letter-drawer-front > :last-child { text-align: right; } .letter-drawer-pull { width: 100%; height: 18px; border: 1px solid rgba(244, 232, 211, 0.5); border-top-color: rgba(20, 13, 9, 0.7); border-radius: 4px 4px 12px 12px; background: rgba(23, 15, 11, 0.22); box-shadow: inset 0 3px 5px rgba(0,0,0,0.24); } .letter-rack { display: grid; gap: 12px; margin: 12px 0 0; } .letter { --letter-paper: var(--drawer-paper); position: relative; margin: 0; overflow: hidden; color: var(--drawer-ink); background: var(--letter-paper); border: 1px solid rgba(63, 47, 35, 0.32); border-radius: 4px; box-shadow: 0 5px 12px rgba(20, 12, 8, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease; } .letter--house { transform: rotate(-0.2deg); border-left: 6px solid #879879; } .letter--qc { --letter-paper: var(--drawer-paper-rose); transform: rotate(0.15deg); border-left: 6px solid #A85F64; } .letter--receipt { --letter-paper: var(--drawer-receipt); transform: rotate(-0.1deg); border-left: 6px solid #77746C; } .letter--worry { --letter-paper: #E8E4D5; transform: rotate(0.1deg); border-left: 6px solid #7D8066; } .letter[open] { z-index: 1; transform: translateY(-2px) rotate(0); box-shadow: 0 10px 20px rgba(20, 12, 8, 0.28); } .letter > .letter-summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'kind action' 'title action'; align-items: center; gap: 5px 18px; min-height: 76px; padding: 14px 18px; cursor: pointer; list-style: none; color: var(--drawer-ink); } .letter > .letter-summary::-webkit-details-marker { display: none; } .letter > .letter-summary:focus-visible { outline-color: #8C4E54; outline-offset: -4px; border-radius: 0; } .letter > .letter-summary::after { content: ''; position: absolute; right: 16px; bottom: 8px; left: 16px; border-bottom: 1px dashed var(--drawer-line); opacity: 0.8; } .letter-kind { grid-area: kind; min-width: 0; overflow-wrap: anywhere; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1.25px; color: var(--drawer-sub); } .letter-title { grid-area: title; min-width: 0; overflow-wrap: anywhere; font-family: 'Gowun Batang', serif; font-size: 17px; line-height: 1.35; color: var(--drawer-ink); } .letter-action { grid-area: action; min-width: 108px; padding: 9px 0 9px 18px; border-left: 1px dashed var(--drawer-line); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; line-height: 1.3; letter-spacing: 0.8px; text-align: center; color: var(--drawer-sub); } .letter-action::before { content: 'PULL OUT ↘'; } .letter[open] > .letter-summary .letter-action::before { content: 'PUT BACK ↖'; } .letter > .letter-body { padding: 22px clamp(18px, 4vw, 38px) 24px; border-top: 1px dashed var(--drawer-line); color: var(--drawer-ink); animation: letterUnfold 0.24s ease-out both; } .letter--house > .letter-body { background-image: repeating-linear-gradient(to bottom, transparent 0 30px, rgba(92, 117, 143, 0.09) 31px 32px); } .worry-jar { margin: 0; } .worry-form { position: relative; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .worry-input { flex: 1 1 240px; min-width: 0; font-family: 'Gaegu', cursive; font-size: 17px; color: var(--drawer-ink); background: none; border: none; border-bottom: 2px dashed var(--drawer-line); padding: 6px 4px; outline: none; resize: none; } .worry-input::placeholder { color: var(--drawer-sub); opacity: 0.8; } .worry-status { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.5px; color: #667054; min-height: 16px; margin: 10px 0 6px; } .letter--worry .card-label { color: var(--drawer-ink); } .letter--worry .diary-note { color: var(--drawer-sub); } .worry-crumb { position: absolute; z-index: 3; pointer-events: none; font-family: 'Gaegu', cursive; font-size: 15px; color: var(--drawer-sub); background: #F3E9D4; border-radius: 999px; padding: 2px 12px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 0.65s cubic-bezier(0.5, -0.1, 0.7, 1), opacity 0.65s ease; } @media (prefers-reduced-motion: reduce) { .worry-crumb { transition: none; display: none; } } .letter-paper-head { margin-bottom: 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; line-height: 1.55; letter-spacing: 1.1px; color: #6B5142; } .letter-copy { max-width: 68ch; margin: 0 0 12px; font-family: 'Gowun Batang', serif; font-size: 15px; line-height: 1.75; color: var(--drawer-ink); } .letter-turnover { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 22px 0 10px; padding-top: 12px; border-top: 1px dashed var(--drawer-line); font-family: 'Gaegu', cursive; font-size: 16px; color: var(--drawer-sub); } .letter-turnover span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 1px; color: #6B5142; } .letter-verse-card { margin: 0; padding: 13px 16px; background: rgba(255, 253, 246, 0.48); border: 1px solid var(--drawer-line); border-left: 3px solid #879879; } .letter-verse { overflow-wrap: anywhere; margin: 0; font-family: 'Gowun Batang', serif; font-size: 16px; line-height: 1.78; color: var(--drawer-ink); } .letter-ref { display: block; overflow-wrap: anywhere; margin-top: 9px; font-family: 'Gowun Batang', serif; font-size: 12.5px; font-style: normal; color: var(--drawer-sub); } .letter-meta { margin-top: 12px; overflow-wrap: anywhere; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; line-height: 1.65; letter-spacing: 0.8px; color: #6B5142; } .letter-audit-list { display: grid; gap: 0; max-width: 660px; margin: 14px 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--drawer-line); } .letter-audit-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--drawer-line); font-family: 'Gowun Batang', serif; font-size: 14px; line-height: 1.55; } .letter-audit-list span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 1px; color: #8C4E54; } .letter-finding { max-width: 700px; margin-top: 18px; padding: 11px 13px; border: 2px solid rgba(140, 78, 84, 0.68); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; line-height: 1.65; letter-spacing: 0.75px; color: #7D444A; transform: rotate(-0.35deg); } .letter--receipt > .letter-body { padding-block: 18px 24px; } .letter-receipt-slip { position: relative; max-width: 610px; margin: 0 auto; padding: 20px clamp(16px, 3.5vw, 28px) 24px; background: #F5F3EB; border-right: 1px dashed rgba(64,55,47,0.22); border-left: 1px dashed rgba(64,55,47,0.22); box-shadow: 0 7px 16px rgba(48, 39, 32, 0.09); } .letter-checks { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-family: 'Gowun Batang', serif; font-size: 14px; line-height: 1.5; color: var(--drawer-ink); } .letter-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; } .letter-receipt-rule { margin: 20px 0 12px; padding-block: 10px; border-top: 1px dashed var(--drawer-line); border-bottom: 1px dashed var(--drawer-line); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; line-height: 1.5; letter-spacing: 0.9px; text-align: center; color: #5F574E; } .letter-incident { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; padding: 13px; border: 2px solid rgba(64,55,47,0.36); background: rgba(255,255,255,0.26); } .letter-incident picture { width: 96px; } .letter-incident img { width: 100%; filter: grayscale(1) sepia(0.18) contrast(1.3); mix-blend-mode: multiply; opacity: 0.72; } .letter-incident-copy { min-width: 0; overflow-wrap: anywhere; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; line-height: 1.65; letter-spacing: 0.35px; color: #40372F; } .letter-receipt-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; } .letter .fund-btn { color: var(--drawer-ink); background: rgba(255,255,255,0.2); border-color: rgba(109, 70, 67, 0.65); } .letter-incident-number { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; letter-spacing: 1px; color: var(--drawer-sub); } @keyframes letterUnfold { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .letter, .letter[open], .letter-finding { transform: none; transition: none; } .letter > .letter-body { animation: none; } .sugar-packet.is-torn .sugar-packet-body { animation: none; transform: translateY(34%) rotate(-1.2deg); } .sugar-packet.is-torn .sugar-packet-tab { animation: none; transform: translate(-8%, -45%) rotate(-9deg); } .sugar-packet.is-torn .sugar-packet-inside { animation: none; opacity: 1; transform: scale(1) rotate(-1deg); } .sugar-packet.is-torn .sugar-packet-grains { animation: none; } .sugar-packet.is-resetting .sugar-packet-paper { transition: none; } .dice-face:hover .dice-poly, .dice-face:active .dice-poly { transform: none; } .dice-face.is-rolling .dice-poly, .dice-face.is-rolling::after { animation: none; } } /* bring-your-own stickers: any picture gets the die-cut sticker treatment */ .diary-item--photo img { display: block; width: 76px; height: auto; max-height: 76px; object-fit: contain; background: #FFFDFA; border: 3px solid rgba(255, 253, 250, 0.95); border-radius: 9px; box-shadow: 0 3px 9px rgba(38, 48, 43, 0.28); } .diary-tray-row .link-btn + .link-btn { margin-left: 12px; } /* the reader's own verse cards, filed inside the house note */ .letter-shelf { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; } .letter-shelf summary { cursor: pointer; color: var(--drawer-sub); } .shelf-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 480px; } .shelf-ref, .shelf-text { font-family: 'Gaegu', cursive; font-size: 16px; color: var(--ink); background: none; border: none; border-bottom: 2px dashed var(--border); padding: 5px 4px; outline: none; resize: none; } .shelf-ref::placeholder, .shelf-text::placeholder { color: var(--sub); opacity: 0.7; } .shelf-form .fund-btn { align-self: flex-start; } .shelf-status { font-family: 'Gaegu', cursive; font-size: 15px; color: var(--mug); min-height: 18px; margin-top: 8px; } .shelf-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .shelf-row { display: flex; min-width: 0; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; } .shelf-row-ref { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-family: 'Gowun Batang', serif; font-size: 13.5px; color: var(--sub); } .shelf-row .link-btn { flex: 0 0 auto; } .letter .letter-shelf { border-top-color: var(--drawer-line); } .letter .shelf-ref, .letter .shelf-text { color: var(--drawer-ink); border-bottom-color: var(--drawer-line); } .letter .shelf-ref::placeholder, .letter .shelf-text::placeholder { color: var(--drawer-sub); } .letter .shelf-status, .letter .shelf-row-ref, .letter .diary-note { color: var(--drawer-sub); } .letter .link-btn { color: #7D444A; } @media (max-width: 820px) { .hero-aside { width: 100%; flex: 1 1 100%; align-items: center; } .wx { margin-inline: auto; } } /* ---- phone layout: one deliberate column, compact but still touchable ---- */ @media (max-width: 640px) { .hero-aside { width: 100%; flex: 1 1 100%; justify-content: center; align-items: center; } .wx { width: min(100%, 360px); margin-inline: auto; } .personnel-row { justify-content: center; } .qc-card { width: 100%; max-width: 360px; flex: 1 1 100%; margin-inline: auto; } } @media (max-width: 520px) { .sec, .sec--hero, .sec--clearance { padding-bottom: 56px; } .sec--hero { padding-top: 36px; } /* Each section label gets a predictable row instead of opportunistic flex wraps. */ .sec-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 4px; padding-bottom: 12px; } .sec-num, .sec-title, .sec-meta { min-width: 0; } .sec-title { font-size: clamp(28px, 8.5vw, 32px); line-height: 1.1; letter-spacing: -0.35px; overflow-wrap: anywhere; } .sec-title .ko { display: inline-block; } .sec-meta { margin: 3px 0 0; flex-basis: auto; font-size: 9.5px; letter-spacing: 0.7px; line-height: 1.55; } .hero-main { min-width: 0; flex-basis: 100%; } .hero-titlewrap { width: 100%; align-items: center; gap: 10px; } .hero-title { min-width: 0; font-size: clamp(38px, 11.5vw, 48px); letter-spacing: -1.4px; white-space: nowrap; } .hero-seal { width: 44px; height: 44px; flex: 0 0 44px; } .hero-seal span { font-size: 16px; } .hero-sub { max-width: 100%; font-size: clamp(18px, 5.2vw, 21px); line-height: 1.25; } .hero-body { font-size: 15px; line-height: 1.7; } .cafe-handoff { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 14px; } .cafe-handoff--hero { margin: -4px 0 20px; } .chip-row { display: none; } .case-card, .seat-card, .chalk-card, .diary-card { margin-top: 22px; padding: 18px 16px 16px; } .clearance-card { margin-top: 22px; padding: 20px 16px 18px; } .fund-btn, .stamp-in-btn { max-width: 100%; min-height: 44px; white-space: normal; line-height: 1.35; } .op-note, .card-note, .last-seal, .diary-note, .exit-sub { overflow-wrap: anywhere; } .footer-legal { overflow-wrap: anywhere; font-size: 9px; letter-spacing: 0.3px; line-height: 1.7; } .case-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .case-item { min-width: 0; padding: 14px 8px 10px; } .case-item-name { line-height: 1.25; } .case-item-tag { white-space: normal; text-align: center; line-height: 1.3; } .case-plate { justify-content: center; gap: 14px; text-align: center; } .case-plate-body { min-width: 0; flex: 1 1 100%; } .seat-pane-wrap { min-height: 0; flex-basis: 100%; aspect-ratio: 4 / 3; border-width: 7px; } .seat-window-status { left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 2px 5px; font-size: 7.5px; letter-spacing: 0.45px; } .seat-stereo { min-width: 0; flex-basis: 100%; } .stereo-actions { grid-template-columns: minmax(0, 1fr); } .stereo-shared { align-items: flex-start; flex-direction: column; } .stereo-shared .link-btn { width: 100%; text-align: left; } .seat-stereo .fund-btn, .dice-side .fund-btn, .worry-form .fund-btn { width: 100%; padding: 9px 12px; } .seat-table-row { gap: 20px; } .dice-block { min-width: 0; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 12px; } .dice-stage { align-self: center; } .dice-side { width: 100%; min-width: 0; text-align: center; } .dice-result { text-align: left; } .dice-table { text-align: left; } .sugar-block { min-width: 0; flex: 1 1 100%; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } .sugar-packet { width: 104px; height: 92px; } .sugar-packet-qc { left: 7px; top: 15px; width: 18px; height: 18px; font-size: 6px; } .sugar-packet-name { left: 31px; top: 13px; font-size: 15px; } .sugar-packet-ko { left: 32px; top: 30px; font-size: 12px; } .sugar-packet-brand { left: 7px; right: 7px; bottom: 5px; font-size: 4.8px; } .sugar-packet-tear { left: 7px; right: 7px; top: 6px; font-size: 5.5px; } .sugar-answer-print { font-size: 20px; } .sugar-note { font-size: 15.5px; } .chalk-boardwrap { border-width: 7px; } .chalk-tray { gap: 8px; } .chalk-pickup { min-height: 44px; flex: 1 1 100%; } .chalk-stick { width: 40px; height: 28px; } .chalk-size { width: 32px; height: 32px; } .chalk-tool { min-height: 36px; } .chalk-identity { flex: 1 1 100%; justify-content: space-between; } .chalk-status { flex: 1 0 100%; margin-left: 0; } .diary-modebar { align-items: stretch; } .diary-mode-copy, .diary-mode-switch { width: 100%; } .diary-mode-btn { min-height: 42px; padding-inline: 7px; } .diary-page { min-height: clamp(300px, 92vw, 340px); } .diary-tray-row { align-items: flex-start; gap: 8px 12px; } .diary-tray-row .diary-note { flex-basis: 100%; line-height: 1.5; } .diary-tray-row .link-btn { margin-left: 0; } .diary-tray-row .link-btn + .link-btn { margin-left: 4px; } .diary-tray-item { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .personnel-row { gap: 18px; margin-top: 22px; } .dossier-card { flex-basis: 100%; padding: 22px 18px; } .qc-card { padding: 24px 18px; } .qc-photo { aspect-ratio: 1; overflow: hidden; } .clearance-row { gap: 22px; } .seal-grid { gap: 8px; } .log-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'date badge' 'title title'; gap: 6px 12px; align-items: start; padding: 14px 16px; } .log-date { grid-area: date; width: auto; } .log-title { grid-area: title; min-width: 0; line-height: 1.35; } .log-badge { grid-area: badge; justify-self: end; } .letter-drawer { margin-top: 22px; padding: 12px 10px 18px; border-radius: 12px 12px 9px 9px; } .letter-drawer-front { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; min-height: 32px; font-size: 8px; letter-spacing: 0.75px; } .letter-drawer-front > :last-child { display: none; } .letter-rack { gap: 10px; margin-top: 10px; } .letter > .letter-summary { grid-template-areas: 'kind action' 'title title'; gap: 7px 10px; min-height: 82px; padding: 13px 13px 15px; } .letter-kind { font-size: 8.5px; letter-spacing: 0.8px; } .letter-title { font-size: 15.5px; line-height: 1.4; } .letter-action { min-width: 0; padding: 0; border-left: 0; font-size: 8px; text-align: right; } .letter > .letter-summary::after { right: 12px; bottom: 7px; left: 12px; } .letter > .letter-body { padding: 17px 14px 19px; } .letter-copy { font-size: 14.5px; line-height: 1.72; } .letter-verse-card { padding: 12px; } .letter-verse { font-size: 15px; line-height: 1.72; } .letter--receipt > .letter-body { padding: 10px 8px 16px; } .letter-receipt-slip { padding: 17px 12px 20px; } .letter-incident { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px; } .letter-incident picture { width: 76px; } .letter-incident-copy { font-size: 10px; line-height: 1.55; } .letter-receipt-actions .fund-btn { width: 100%; } } /* Comfortable controls at phone widths, including controls revealed after a tap. */ @media (max-width: 640px) { .fund-btn, .stamp-in-btn, .chalk-pickup, .chalk-tool, .chalk-identity-link, .manifest-input, .stereo-url, .stereo-actions .fund-btn, .stereo-controls > summary, .shelf-ref, .shelf-text { min-height: 44px; } .link-btn { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 2px; } .dice-table > summary, .letter-shelf > summary { display: flex; min-height: 44px; align-items: center; padding-block: 8px; } .diary-tray-item { min-width: 44px; min-height: 44px; } .chalk-stick { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; } .chalk-stick:nth-child(odd), .chalk-stick:nth-child(even) { transform: none; } .chalk-stick::before { content: ''; position: absolute; left: 3px; right: 3px; top: 15px; height: 14px; border: 1px solid var(--border); border-radius: 3px; } .chalk-stick:nth-child(odd)::before { transform: rotate(-2deg); } .chalk-stick:nth-child(even)::before { transform: rotate(2deg); } .chalk-stick--0::before { background: #F2ECDF; } .chalk-stick--1::before { background: #EDB2C0; } .chalk-stick--2::before { background: #A9C79B; } .chalk-stick--3::before { background: #9FBAD1; } .chalk-stick--4::before { background: #EFD9A7; } .chalk-stick--5::before { background: #C4B5E0; } .chalk-size { width: 44px; height: 44px; } } @media (max-width: 520px) { .doc { padding: 36px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); } .rule { grid-template-columns: 34px minmax(0, 1fr); gap: 8px 10px; } .entry { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; } .rules-title, .doc-eyebrow, .doc-meta, .doc-close { overflow-wrap: anywhere; } } @media (max-width: 360px) { .hero-titlewrap { gap: 8px; } .hero-title { font-size: clamp(33px, 10.5vw, 38px); letter-spacing: -1px; } .hero-seal { width: 44px; height: 44px; flex-basis: 44px; } .dice-block { flex-direction: column; align-items: stretch; } .dice-stage { align-self: center; } .dice-side { width: 100%; text-align: center; } .sugar-block { grid-template-columns: 94px minmax(0, 1fr); gap: 9px; } .sugar-packet { width: 94px; height: 86px; } .sugar-packet-name { left: 29px; font-size: 14px; letter-spacing: 1px; } .sugar-packet-ko { left: 30px; top: 29px; font-size: 11px; } .sugar-packet-brand { letter-spacing: 0.35px; } .sugar-note { font-size: 14.5px; line-height: 1.4; } .letter-incident { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .letter-incident picture { width: 88px; } } @media (max-width: 300px) { .hero-title { font-size: clamp(29px, 10.5vw, 32px); } } @media (hover: none) { .card:hover, .case-item:hover, .log-row:hover { transform: none; } .wiggle-hover:hover, .tape-lift:hover, .disb-photo-button:hover { animation: none; } }