:root{ /* ── 옻칠 바탕 (카드 테두리 실측: #0E0B07 30~34%) ── */ --lacquer-900:#0B0805; --lacquer-800:#0E0B07; --lacquer-700:#14100B; --lacquer-600:#1B1510; /* ── 단청 (상단/좌측 단청 띠 실측) ── */ --dc-red:#A51D0C; --dc-red-bright:#CB200B; --dc-teal:#205064; --dc-teal-muted:#354348; --dc-blue:#2A4052; --dc-green:#4B5144; --dc-gold:#BF934E; --dc-gold-light:#D2A660; --dc-gold-pale:#ECD1A2; --dc-cream:#D8C8B2; --dc-magenta:#B64360; /* ── 자개 (옷자락·후광 패치 실측) ── */ --nac-pearl:#C7CDD0; --nac-sage:#87A69A; --nac-mint:#76918F; --nac-cream:#C8B3A0; /* ── 기존 변수 매핑 (이 값만 바꿔도 화면 전체가 따라온다) ── */ --bg:#0E0B07; --bg-2:#14100B; --ink:#EFE7D8; --ink-dim:#B9B0A2; --ink-faint:#8C8477; --gold:#C89B54; --gold-soft:#BF934E; --line:rgba(191,147,78,.22); --line-soft:rgba(191,147,78,.13); --card-w:clamp(112px,31vw,170px); /* ── 자개 그라디언트 (측정 앵커만 사용) ── */ /* 자개 무지갯빛: 카드에서 hue 밴드별로 측정한 파스텔 평균값만 사용 180–210° #91A8B1 · 150–180° #8DA9A2 · 30–60° #A59479 · 270–300° #AD9BB4 · 0–30° #AA9385 */ --nacre:linear-gradient(100deg,#CAD8DD 0%,#C1D5D0 14%,#C6BAAA 34%,#D5C8DB 54%,#CDBEB5 72%,#CAD0DC 88%,#CAD8DD 100%); /* ── 제목용 서체 (본문은 시스템 산세리프 유지) ── */ --font-title:"Gowun Batang","Noto Serif KR",ui-serif,Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Geeza Pro","Noto Naskh Arabic","Kohinoor Devanagari",serif; /* ── 카드 뒷면: 이 변수 하나를 바꾸면 .face-back/.pick-card/.daily-back 세 곳이 함께 바뀐다 ── */ --card-back-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20120%27%3E%3Cdefs%3E%3CradialGradient%20id%3D%27n1%27%20cx%3D%2736%25%27%20cy%3D%2730%25%27%20r%3D%2774%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23EAF0F2%27%2F%3E%3Cstop%20offset%3D%2726%25%27%20stop-color%3D%27%23CAD8DD%27%2F%3E%3Cstop%20offset%3D%2752%25%27%20stop-color%3D%27%23C1D5D0%27%2F%3E%3Cstop%20offset%3D%2772%25%27%20stop-color%3D%27%23D5C8DB%27%2F%3E%3Cstop%20offset%3D%2788%25%27%20stop-color%3D%27%23C6BAAA%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23CDBEB5%27%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%27n2%27%20x1%3D%270%27%20y1%3D%271%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23A8C0C6%27%2F%3E%3Cstop%20offset%3D%2745%25%27%20stop-color%3D%27%23D9CBB6%27%2F%3E%3Cstop%20offset%3D%2775%25%27%20stop-color%3D%27%23CBB9D2%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23BBD2CC%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%2744%27%20fill%3D%27none%27%20stroke%3D%27%23BF934E%27%20stroke-width%3D%271.3%27%20opacity%3D%27.55%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%2737%27%20fill%3D%27url%28%23n1%29%27%20opacity%3D%27.96%27%20stroke%3D%27%23BF934E%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%2737%27%20fill%3D%27none%27%20stroke%3D%27%230E0B07%27%20stroke-width%3D%272.2%27%20opacity%3D%27.25%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238A6A34%27%20stroke-width%3D%271.25%27%20opacity%3D%27.72%27%3E%3Cg%20id%3D%27pt%27%3E%3Cpath%20d%3D%27M60%2025.5c6%207.5%206%2016%200%2022.5-6-6.5-6-15%200-22.5z%27%2F%3E%3C%2Fg%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%2845%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%2890%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%28135%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%28180%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%28225%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%28270%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pt%27%20transform%3D%27rotate%28315%2060%2060%29%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27url%28%23n2%29%27%20opacity%3D%27.55%27%3E%3Cg%20id%3D%27pd%27%3E%3Cpath%20d%3D%27M60%2030.5c4.4%205.6%204.4%2011.8%200%2016.8-4.4-5-4.4-11.2%200-16.8z%27%2F%3E%3C%2Fg%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%2845%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%2890%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%28135%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%28180%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%28225%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%28270%2060%2060%29%27%2F%3E%3Cuse%20href%3D%27%23pd%27%20transform%3D%27rotate%28315%2060%2060%29%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27%23205064%27%20opacity%3D%27.5%27%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2718.5%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%27101.5%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%2718.5%27%20cy%3D%2760%27%20r%3D%272.1%27%2F%3E%3Ccircle%20cx%3D%27101.5%27%20cy%3D%2760%27%20r%3D%272.1%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%279.5%27%20fill%3D%27%230E0B07%27%20opacity%3D%27.55%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%278%27%20fill%3D%27%23B64360%27%20stroke%3D%27%23BF934E%27%20stroke-width%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2760%27%20r%3D%273%27%20fill%3D%27%23EAF0F2%27%20opacity%3D%27.9%27%2F%3E%3C%2Fsvg%3E"), linear-gradient(118deg,transparent 33%,rgba(202,216,221,.09) 47%,rgba(213,200,219,.07) 54%,transparent 72%), radial-gradient(circle at 50% 44%, rgba(199,205,208,.06), transparent 58%), linear-gradient(160deg,#171209,#0E0B07 62%,#0A0705); --card-back-size:100% 100%,56% auto,auto,auto,auto; --card-back-position:0 0,center 44%,0 0,0 0,0 0; --card-back-repeat:no-repeat; /* ── 문양 (data URI, 추가 요청 0) ── */ --pat-band:url("data:image/svg+xml;utf8,"); --pat-corner:url("data:image/svg+xml;utf8,"); --pat-medal:url("data:image/svg+xml;utf8,"); } *{box-sizing:border-box} html,body{margin:0;padding:0} /* 히어로 오로라가 화면 밖으로 번지므로 가로 스크롤을 만들지 않는다 */ html{overflow-x:clip} body{ background: radial-gradient(900px 600px at 50% -10%, rgba(216,184,120,.10), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(120,90,180,.08), transparent 60%), var(--bg); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; font-size:16px; line-height:1.65; min-height:100dvh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; } .grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")} .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);position:relative;z-index:2} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .brand-mark{color:var(--gold);font-size:14px;letter-spacing:.1em} .brand-name{font-family:ui-serif,Georgia,"Times New Roman",serif;letter-spacing:.14em; text-transform:uppercase;font-size:13px;color:var(--gold)} .lang-picker select{ background:transparent;border:1px solid var(--line);color:var(--ink-dim); border-radius:999px;padding:7px 12px;font-size:12.5px;letter-spacing:.04em;cursor:pointer; } .lang-picker select:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px} main{flex:1;width:min(760px,100%);margin:0 auto;padding:clamp(24px,5vw,56px) clamp(16px,4vw,32px) 40px;position:relative;z-index:1} .screen{display:none;animation:fade .45s ease both} .screen.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .tagline{font-family:ui-serif,Georgia,serif;font-size:clamp(22px,4.4vw,34px); line-height:1.35;margin:0 0 32px;color:var(--ink);letter-spacing:.01em} .tagline::after{content:"";display:block;width:44px;height:1px;margin-top:20px; background:linear-gradient(90deg,var(--gold),transparent)} .field-label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-soft);margin:0 0 10px} textarea{ width:100%;background:rgba(255,255,255,.028);border:1px solid var(--line);border-radius:14px; color:var(--ink);padding:16px 16px;font:inherit;resize:vertical;min-height:96px; transition:border-color .2s,background .2s; } textarea:focus{outline:none;border-color:rgba(216,184,120,.5);background:rgba(255,255,255,.045)} textarea::placeholder{color:#6d6862} .spreads{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:0 0 28px} .spread{ text-align:start;background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:14px; padding:14px 16px;cursor:pointer;color:var(--ink);font:inherit;transition:all .2s; } .spread:hover{border-color:rgba(216,184,120,.34);background:rgba(255,255,255,.04)} .spread[aria-checked="true"]{border-color:var(--gold);background:rgba(216,184,120,.09); box-shadow:0 0 0 1px rgba(216,184,120,.28) inset} .spread b{display:block;font-weight:600;font-size:15px;margin-bottom:2px} .spread span{display:block;font-size:13px;color:var(--ink-dim);line-height:1.45} .spread i{display:block;font-style:normal;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--gold-soft);margin-top:8px} .primary{ width:100%;padding:16px 20px;border-radius:999px;border:1px solid rgba(216,184,120,.55); background:linear-gradient(180deg,rgba(216,184,120,.22),rgba(216,184,120,.08)); color:#f6efe2;font:inherit;font-weight:600;letter-spacing:.05em;cursor:pointer; transition:all .2s; } .primary:hover{background:linear-gradient(180deg,rgba(216,184,120,.34),rgba(216,184,120,.14))} .primary:disabled{opacity:.5;cursor:wait} .ghost{ padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:transparent; color:var(--ink-dim);font:inherit;font-size:14px;cursor:pointer;transition:all .2s; } .ghost:hover{color:var(--ink);border-color:rgba(216,184,120,.4)} .error{margin-top:16px;font-size:14px;color:#e79393;text-align:center} .spread-title{font-family:ui-serif,Georgia,serif;font-size:clamp(19px,3.6vw,26px); margin:0 0 6px;color:var(--ink);font-weight:400} .hint{font-size:13px;color:var(--ink-dim);margin:0 0 28px} /* 카드 */ .deck{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.4vw,18px);margin:0 0 28px} .card{ width:var(--card-w);aspect-ratio:2/3;border-radius:10px;position:relative;cursor:pointer; perspective:900px;background:transparent;border:0;padding:0; }.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .card.revealed .card-inner{transform:rotateY(180deg)} .face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;overflow:hidden} .face-back{ background: radial-gradient(circle at 50% 18%, rgba(216,184,120,.22), transparent 55%), repeating-linear-gradient(45deg, rgba(216,184,120,.07) 0 2px, transparent 2px 9px), linear-gradient(160deg,#131019,#0a0810); border:1px solid rgba(216,184,120,.34); display:flex;align-items:center;justify-content:center; } .face-back::after{content:"✦";color:var(--gold);font-size:20px;opacity:.85} .face-front{transform:rotateY(180deg);background:#0a0a0d;border:1px solid rgba(216,184,120,.28)} .face-front img{width:100%;height:100%;object-fit:cover;display:block} .face-front .noimg{display:flex;align-items:center;justify-content:center;height:100%; padding:8px;text-align:center;font-size:11px;color:var(--gold-soft);line-height:1.35} .card-label{ position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-size:11px; color:var(--ink-dim);opacity:0;transition:opacity .4s;letter-spacing:.04em; } .card.revealed .card-label{opacity:1} /* 결과 카드 — 카드 그림이 주인공. 모바일은 세로로 크게, 데스크톱은 겹친 팬으로 크게 */ .mini-cards{display:flex;flex-direction:column;align-items:center;gap:20px;margin:0 0 30px} .mini{ display:block;padding:0;width:min(86vw,380px);border-radius:12px;overflow:hidden; border:1px solid rgba(216,184,120,.28);background:#0a0a0d;cursor:zoom-in; box-shadow:0 18px 44px rgba(0,0,0,.55); transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .22s; } .mini:hover,.mini:focus-visible{border-color:rgba(216,184,120,.6);outline:none} .mini img{width:100%;display:block} .mini .noimg{height:180px;display:flex;align-items:center;justify-content:center; font-size:14px;color:var(--gold-soft);text-align:center;padding:8px} .mini small{display:block;font-size:12.5px;color:var(--ink-dim);padding:9px 4px;text-align:center;letter-spacing:.06em;line-height:1.3} .mini-cards[data-count="1"] .mini{width:min(90vw,420px)} /* 데스크톱: 카드를 크게 겹쳐 놓은 팬 — 그림이 한눈에 들어오게 */ @media (min-width:641px){ .mini-cards{flex-direction:row;align-items:flex-start;justify-content:center;gap:0;margin:4px 0 34px} .mini{width:clamp(172px,23vw,300px);transform-origin:50% 92%} /* 카드 3장이 서로 35% 정도만 겹치게 — 각 카드 그림이 다 보이도록 */ .mini + .mini{margin-left:calc(-1 * clamp(54px,7vw,100px))} .mini:nth-child(1){transform:rotate(-7deg);z-index:1} .mini:nth-child(2){transform:translateY(-6px);z-index:3} .mini:nth-child(3){transform:rotate(7deg);z-index:2} .mini:hover,.mini:focus-visible{ transform:translateY(-12px) rotate(0deg) scale(1.02);z-index:6; box-shadow:0 26px 60px rgba(0,0,0,.7),0 0 0 1px rgba(216,184,120,.45); } .mini-cards[data-count="1"] .mini{width:clamp(200px,42vw,380px);transform:none} } /* 카드 직접 선택 (TARO-BUILD-03) */ .pick-slots{display:flex;gap:10px;justify-content:center;margin:18px 0 6px} .pick-slot{ flex:1;max-width:112px;aspect-ratio:2/3;border-radius:8px;border:1px dashed rgba(216,184,120,.28); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; color:#5f5a53;font-size:11px;line-height:1.25;text-align:center;padding:6px;transition:all .25s; } .pick-slot b{font-size:16px;font-weight:600;color:#4f4a44} .pick-slot.filled{border-style:solid;border-color:var(--gold);color:var(--gold); background:linear-gradient(160deg,rgba(216,184,120,.16),rgba(216,184,120,.04))} .pick-slot.filled b{color:var(--gold)} .pick-progress{text-align:center;margin:10px 0 16px;letter-spacing:.04em} .pick-progress.is-ready{color:var(--gold)} .pick-strip{ --pick-w:clamp(126px,34vw,168px); --pick-overlap:clamp(84px,23vw,116px); /* 오른쪽 카드가 덮는 폭 → 보이는 띠 = pick-w - overlap */ display:flex;flex-direction:column;gap:14px; overflow-x:auto;overflow-y:hidden; padding:14px 2px 20px; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; scrollbar-width:thin; } .pick-row{display:flex;align-items:flex-start;padding-inline:4px} .pick-card{ flex:0 0 auto;width:var(--pick-w);aspect-ratio:2/3;border-radius:10px;position:relative; border:1px solid rgba(216,184,120,.34);cursor:pointer;padding:0; margin-left:calc(-1 * var(--pick-overlap)); background: radial-gradient(circle at 50% 18%, rgba(216,184,120,.22), transparent 55%), repeating-linear-gradient(45deg, rgba(216,184,120,.07) 0 2px, transparent 2px 9px), linear-gradient(160deg,#131019,#0a0810); box-shadow:-10px 0 16px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35) inset; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .pick-row .pick-card:first-child{margin-left:0} /* 겹쳐 있어 왼쪽 띠만 보이므로 표식도 그 안에 둔다 */ .pick-card::after{content:"✦";position:absolute;left:14px;top:50%;transform:translateY(-50%); color:var(--gold);font-size:13px;opacity:.75} .pick-card:hover,.pick-card:focus-visible{transform:translateY(-10px);z-index:3;outline:none} .pick-card[aria-pressed="true"]{ transform:translateY(-18px);z-index:4; border-color:var(--gold); box-shadow:0 10px 26px rgba(216,184,120,.28), 0 0 0 2px rgba(216,184,120,.5) inset; } .pick-card .order{ position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:50%;z-index:5; background:var(--gold);color:#1a1712;font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .16s; } .pick-card[aria-pressed="true"] .order{opacity:1} .pick-tip{text-align:center;margin:0 0 18px} .interpretation{font-family:ui-serif,Georgia,serif;font-size:clamp(16px,2.6vw,18.5px); line-height:1.85;color:#e4dfd5;white-space:pre-wrap;min-height:120px} .thinking{color:var(--ink-dim);font-style:italic} .interpretation .caret{display:inline-block;width:7px;height:1em;background:var(--gold); vertical-align:-2px;animation:blink 1s steps(2) infinite;margin-left:2px} @keyframes blink{50%{opacity:0}} .question-echo{font-size:14px;color:var(--ink-dim);margin:0 0 20px;padding-left:12px; border-left:2px solid var(--line)} .actions{margin-top:36px;display:flex;justify-content:center} .footer{padding:26px clamp(16px,4vw,40px) 34px;text-align:center;position:relative;z-index:1} .footer p{margin:0;font-size:11.5px;color:#5c5851;letter-spacing:.03em} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} body[dir="rtl"] .question-echo{padding-left:0;padding-right:12px;border-left:0;border-right:2px solid var(--line)} body[dir="rtl"] .tagline::after{margin-left:auto} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------------- Phase 2: 계정 · 요금제 · 히스토리 ---------------- */ .topbar-right{display:flex;align-items:center;gap:10px} .account{display:flex;align-items:center;gap:8px} .account-info{display:flex;align-items:center;gap:8px} .account-btn{ background:transparent;border:1px solid var(--line);color:var(--ink-dim); border-radius:999px;padding:7px 14px;font-size:12.5px;letter-spacing:.04em;cursor:pointer;transition:all .2s; } .account-btn:hover{color:var(--ink);border-color:rgba(216,184,120,.45)} .account-btn.subtle{border-color:transparent;color:#6f6a62} .account-btn.subtle:hover{color:var(--ink)} .badge{font-size:11.5px;letter-spacing:.08em;color:var(--gold-soft); border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap} .badge-premium{color:#1a1712;background:var(--gold);border-color:var(--gold);font-weight:600} .modal{position:fixed;inset:0;background:rgba(4,4,6,.78);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:20px;z-index:50} .modal[hidden]{display:none} .modal-card{width:min(420px,100%);background:#0f0f15;border:1px solid var(--line); border-radius:18px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.6)} .modal-title{margin:0 0 8px;font-family:ui-serif,Georgia,serif;font-weight:400;font-size:22px} .modal-desc{margin:0 0 18px;font-size:13.5px;color:var(--ink-dim);line-height:1.6} .modal-card input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.03);color:var(--ink);font:inherit;font-size:15px} .modal-card input:focus{outline:none;border-color:rgba(216,184,120,.5)} .modal-actions{display:flex;gap:10px;margin-top:18px} .modal-actions .primary{flex:1} .modal .hint{margin:12px 0 0;font-size:12.5px;color:var(--ink-dim);min-height:18px} .plans-box{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)} .history-box{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)} .section-title{font-family:ui-serif,Georgia,serif;font-weight:400;font-size:19px;margin:0 0 6px} .section-sub{margin:0 0 18px;font-size:12.5px;color:var(--ink-dim);letter-spacing:.03em} .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .plan{background:rgba(255,255,255,.022);border:1px solid var(--line);border-radius:14px; padding:16px;cursor:pointer;color:var(--ink);font:inherit;text-align:start;transition:all .2s} .plan:hover{border-color:rgba(216,184,120,.45);background:rgba(216,184,120,.06)} .plan b{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;line-height:1.3} .plan span{display:block;font-size:18px;color:var(--gold);font-family:ui-serif,Georgia,serif} .history-list{display:flex;flex-direction:column;gap:8px} .history-item{display:flex;justify-content:space-between;align-items:baseline;gap:12px; background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px; padding:12px 14px;color:var(--ink);font:inherit;text-align:start;cursor:pointer;transition:all .2s} .history-item:hover{border-color:rgba(216,184,120,.4)} .history-q{font-size:14px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .history-meta{font-size:11px;color:#7d776d;white-space:nowrap;letter-spacing:.05em} /* 사업자 정보: 법정 기재 항목이라 숨기지 않되, 푸터의 시각적 리듬을 깨지 않게 가장 작은 크기·가장 낮은 대비로 둔다. 전화번호는 넣지 않는다(대표님 지시). */ .footer-entity{margin:14px auto 0;max-width:min(92vw,720px);font-size:10.5px;line-height:1.7;color:#4a463f;letter-spacing:.01em} .footer-entity a{color:#6f6a62;text-decoration:none;border-bottom:1px solid rgba(216,184,120,.25)} .footer-entity a:hover{color:var(--gold)} .footer-links{margin:8px 0 0;font-size:11.5px} .footer-links a{color:#6f6a62;text-decoration:none} .footer-links a:hover{color:var(--gold)} /* ---------------- Phase 4: 심층(유료) 리딩 ---------------- */ .focus-box{margin:0 0 24px} .focus-chips,.follow-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px} .chip{ border:1px solid var(--line);background:rgba(255,255,255,.022);color:var(--ink-dim); border-radius:999px;padding:9px 16px;font:inherit;font-size:13.5px;cursor:pointer;transition:all .2s; } .chip:hover{color:var(--ink);border-color:rgba(216,184,120,.4)} .chip[aria-pressed="true"]{color:#1a1712;background:var(--gold);border-color:var(--gold);font-weight:600} .focus-note{ width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.028);color:var(--ink);font:inherit;font-size:14.5px; } .focus-note:focus{outline:none;border-color:rgba(216,184,120,.5);background:rgba(255,255,255,.045)} .focus-note::placeholder{color:#6d6862} .follow-box{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)} .follow-box[hidden]{display:none} .follow-hint{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 12px} .follow-chip{ text-align:start;border:1px solid var(--line);background:rgba(255,255,255,.022);color:var(--ink); border-radius:14px;padding:12px 15px;font:inherit;font-size:14px;line-height:1.5;cursor:pointer; transition:all .2s; } .follow-chip:hover{border-color:rgba(216,184,120,.45);background:rgba(216,184,120,.06)} .follow-form{display:flex;gap:8px;margin:14px 0 0} .follow-form input{ flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.028);color:var(--ink);font:inherit;font-size:14.5px; } .follow-form input:focus{outline:none;border-color:rgba(216,184,120,.5)} .follow-form input::placeholder{color:#6d6862} .follow-form .ghost{white-space:nowrap;padding:12px 18px} .follow-answers{display:flex;flex-direction:column;gap:22px;margin-top:24px} .follow-answer{padding-left:14px;border-left:2px solid var(--line)} .follow-q{margin:0 0 8px;font-size:13.5px;color:var(--gold-soft);line-height:1.5} .follow-a{margin:0;font-family:ui-serif,Georgia,serif;font-size:16px;line-height:1.8; color:#e4dfd5;white-space:pre-wrap} .follow-a.thinking{color:var(--ink-dim);font-style:italic} body[dir="rtl"] .follow-answer{padding-left:0;padding-right:14px;border-left:0;border-right:2px solid var(--line)} /* 좁은 화면: 상단바가 가로 스크롤을 만들지 않도록 접는다 (기존 3px 오버플로) */ @media (max-width:480px){ .topbar{flex-wrap:wrap;row-gap:10px} .topbar-right{margin-inline-start:auto} } /* ---------------- Google 로그인 · 공유 카드 ---------------- */ .google-btn{ width:100%;display:flex;align-items:center;justify-content:center;gap:10px; padding:13px 18px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:15px; cursor:pointer;transition:all .2s; } .google-btn:hover{border-color:rgba(216,184,120,.45);background:rgba(255,255,255,.07)} .google-mark{ width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:#fff;color:#4285f4;font-weight:700;font-size:14px;font-family:Georgia,serif;flex:0 0 auto; } .modal-or{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:#6f6a62;font-size:12px} .modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--line)} .modal-or span{letter-spacing:.12em;text-transform:uppercase} .share-box{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .share-box[hidden]{display:none} .share-card{ border:1px solid rgba(216,184,120,.28);border-radius:18px;overflow:hidden; background: radial-gradient(700px 220px at 50% 0%, rgba(216,184,120,.16), transparent 65%), linear-gradient(160deg,#0c0b12,#08070c 60%,#0e0b14); padding:26px 22px 20px;text-align:center; } .share-brand{display:flex;align-items:center;justify-content:center;gap:8px; font-family:ui-serif,Georgia,serif;font-size:11px;letter-spacing:.28em;color:var(--gold); text-transform:uppercase;margin-bottom:14px} .share-spread{font-family:ui-serif,Georgia,serif;font-size:19px;color:#f3ecdf;margin:0 0 8px} .share-question{font-size:13.5px;color:var(--ink-dim);margin:0 auto 18px;max-width:32ch;line-height:1.5} .share-cards{display:flex;gap:10px;justify-content:center;align-items:flex-start;margin-bottom:6px} .share-thumb{width:clamp(74px,23vw,104px)} .share-cards[data-count="1"] .share-thumb{width:clamp(120px,40vw,170px)} .share-thumb img{width:100%;display:block;border-radius:7px;border:1px solid rgba(216,184,120,.28)} .share-thumb small{display:block;font-size:10.5px;color:#8d8779;padding-top:6px;line-height:1.3} .share-foot{font-size:10.5px;letter-spacing:.14em;color:#5f5a53;margin:14px 0 0;text-transform:lowercase} .share-actions{display:flex;gap:10px;margin-top:16px} .share-actions .primary{flex:1;padding:14px 18px;font-size:15px} .share-actions .ghost{white-space:nowrap} .share-box .hint{margin:12px 0 0;text-align:center} /* 한도/결제 안내 CTA · 겹친 덱 상태 */ .ask-cta{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap} .ask-cta[hidden]{display:none} .ask-cta .primary{width:auto;padding:12px 22px;font-size:14.5px} .ask-cta .ghost{padding:12px 20px} #askError{margin-top:16px} .pick-progress.is-error{color:#e79393} .plans-box.flash{animation:planFlash 1.6s ease} @keyframes planFlash{ 0%,100%{box-shadow:none} 25%,75%{box-shadow:0 0 0 2px rgba(216,184,120,.55) inset} } /* ---------------- 후속 질문 클라리파이어 카드 ---------------- */ .clarifier{margin:0 0 16px;padding:14px 16px;border:1px solid rgba(216,184,120,.24); border-radius:14px;background:rgba(216,184,120,.05)} .clarifier-label{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)} .clarifier-body{display:flex;gap:14px;align-items:center} .clarifier-card{ flex:0 0 auto;padding:0;border:1px solid rgba(216,184,120,.3);border-radius:9px;overflow:hidden; background:#0a0a0d;width:clamp(74px,22vw,96px);cursor:zoom-in;transition:transform .18s,border-color .18s; } .clarifier-card:hover,.clarifier-card:focus-visible{transform:translateY(-2px);border-color:rgba(216,184,120,.65);outline:none} .clarifier-card img{width:100%;display:block} .clarifier-meta{display:flex;flex-direction:column;gap:4px;min-width:0} .clarifier-meta strong{font-family:ui-serif,Georgia,serif;font-weight:400;font-size:16px;color:#f3ecdf;line-height:1.35} .clarifier-meta span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)} /* 뽑기 액션(클라리파이어 스킵 포함) */ .pick-actions{flex-wrap:wrap;gap:10px} .pick-actions .primary{width:auto;padding:13px 24px;font-size:14.5px} /* ================= TARO-BUILD-07: 첫 페이지 모션 히어로 ================= */ /* 카드 팬 + 자개 광택 + 리빙 카드(가운데 달) + 오로라/입자 + 오늘의 자개빛 */ .hero{ --hero-h:clamp(158px,25vh,226px); --hero-w:clamp(68px,19vw,100px); --fan-x:clamp(32px,9.5vw,50px); --sheen-x:50%; --sheen-y:42%; --sheen-o:0; --fan-tilt-x:0deg; --fan-tilt-y:0deg; position:relative;isolation:isolate; height:var(--hero-h); margin:0 0 clamp(14px,2.6vw,22px); display:grid;place-items:center; } .hero-aurora{ position:absolute;inset:-14% 0 -3%;z-index:0;pointer-events:none; background: radial-gradient(closest-side at 26% 36%, rgba(126,92,206,.42), transparent 74%), radial-gradient(closest-side at 74% 28%, rgba(56,168,172,.34), transparent 76%), radial-gradient(closest-side at 50% 82%, rgba(216,184,120,.28), transparent 78%); animation:heroAurora 24s ease-in-out infinite alternate; } @keyframes heroAurora{ from{transform:translate3d(-2%,1%,0) scale(1)} to{transform:translate3d(2%,-2%,0) scale(1.08)} } .hero-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none} .hero-particles i{ position:absolute;bottom:-6px;width:3px;height:3px;border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(244,238,224,.95),rgba(216,184,120,.12) 70%,transparent); animation:heroParticle linear infinite; } .hero-particles i:nth-child(1){left:9%;animation-duration:15s;animation-delay:0s} .hero-particles i:nth-child(2){left:23%;animation-duration:19s;animation-delay:2.4s;width:2px;height:2px} .hero-particles i:nth-child(3){left:41%;animation-duration:13s;animation-delay:1.1s} .hero-particles i:nth-child(4){left:58%;animation-duration:21s;animation-delay:3.6s;width:2px;height:2px} .hero-particles i:nth-child(5){left:72%;animation-duration:16s;animation-delay:.7s} .hero-particles i:nth-child(6){left:87%;animation-duration:18s;animation-delay:4.3s;width:2px;height:2px} .hero-particles i:nth-child(7){left:50%;animation-duration:23s;animation-delay:6s;width:2px;height:2px} @keyframes heroParticle{ 0%{opacity:0;transform:translate3d(0,0,0) scale(.5)} 14%{opacity:.85} 68%{opacity:.45} 100%{opacity:0;transform:translate3d(7px,-190px,0) scale(1)} } /* 팬 — 포인터 틸트는 여기 한 겹으로만 건다 */ .hero-fan{ position:relative;width:100%;height:100%;z-index:2; perspective:900px; transform:rotateX(var(--fan-tilt-x)) rotateY(var(--fan-tilt-y)); transition:transform .4s cubic-bezier(.2,.7,.2,1); } .hero-card{ position:absolute;left:50%;bottom:4%; width:var(--hero-w);aspect-ratio:2/3; margin-left:calc(var(--hero-w) / -2); border-radius:calc(var(--hero-w) * .08);overflow:hidden;background:#05050a; transform-origin:50% 120%; transform:translate3d(calc(var(--k) * var(--fan-x)),var(--dy),0) rotate(var(--rot)); box-shadow:0 calc(var(--hero-w) * .1) calc(var(--hero-w) * .26) rgba(0,0,0,.55); animation-name:heroIn,heroFloat; animation-duration:.95s,var(--float-d,7s); animation-timing-function:cubic-bezier(.2,.7,.2,1),ease-in-out; animation-delay:var(--delay,0s),calc(var(--delay,0s) + .95s); animation-iteration-count:1,infinite; animation-fill-mode:both,none; } /* 부채꼴 배치: 가운데가 높고 양 끝이 아래로 처지며 회전 */ .hero-card:nth-child(1){--k:-2;--rot:-13deg;--dy:calc(var(--hero-w) * .11);--delay:0s;--float-d:7.4s} .hero-card:nth-child(2){--k:-1;--rot:-6.4deg;--dy:calc(var(--hero-w) * .04);--delay:.09s;--float-d:8.3s} .hero-card:nth-child(3){--k:0;--rot:0deg;--dy:calc(var(--hero-w) * -.06);--delay:.18s;--float-d:9.1s} .hero-card:nth-child(4){--k:1;--rot:6.4deg;--dy:calc(var(--hero-w) * .04);--delay:.27s;--float-d:8.6s} .hero-card:nth-child(5){--k:2;--rot:13deg;--dy:calc(var(--hero-w) * .11);--delay:.36s;--float-d:7.8s} @keyframes heroIn{ from{opacity:0;scale:.9} to{opacity:1;scale:1} } /* translate 속성만 쓴다 — heroIn(scale)과 같은 요소에서 충돌하지 않는다 */ @keyframes heroFloat{ 0%,100%{translate:0 0} 50%{translate:0 -7px} } /* 그림 창 — 832x1248 기준 창(87,91,658,1065)의 백분율. 프레임을 고정한 채 안쪽 그림만 움직이려고 아트와 프레임을 분리했다. */ .hero-aperture{ position:absolute;left:10.4567%;top:7.2917%;width:79.0865%;height:85.3365%; overflow:hidden;display:block;background:#05050a;border-radius:2px; } .hero-art{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%} .hero-frame{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2} /* 리빙 카드: 가운데(3번째 = The Moon)만 켄 번즈 + 달빛 펄스 */ .hero-card:nth-child(3) .hero-art{animation:heroKenBurns 23s ease-in-out infinite alternate} @keyframes heroKenBurns{ from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.13) translate3d(-1.8%,2.2%,0)} } .hero-card:nth-child(3)::after{ content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit; background:radial-gradient(circle at 50% 34%,rgba(255,244,220,.38),transparent 60%); opacity:0;mix-blend-mode:screen; animation:heroMoonGlow 9s ease-in-out infinite; } @keyframes heroMoonGlow{0%,100%{opacity:.05}50%{opacity:.3}} /* 자개 광택 — 카드마다 속도가 다르게 천천히 흐른다 */ .hero-sheen{ position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:linear-gradient(112deg, transparent 16%, rgba(255,238,202,.30) 28%, rgba(150,214,255,.28) 38%, rgba(234,168,255,.26) 47%, rgba(146,255,222,.22) 56%, rgba(255,214,150,.20) 64%, transparent 76%); background-size:280% 280%; mix-blend-mode:screen;opacity:.5; animation:heroSheen var(--sheen-d,9s) linear infinite; } .hero-card:nth-child(1) .hero-sheen{--sheen-d:11.5s;animation-delay:-3s} .hero-card:nth-child(2) .hero-sheen{--sheen-d:8.6s;animation-delay:-6.4s} .hero-card:nth-child(3) .hero-sheen{--sheen-d:13.2s;animation-delay:-1.2s} .hero-card:nth-child(4) .hero-sheen{--sheen-d:9.7s;animation-delay:-5.1s} .hero-card:nth-child(5) .hero-sheen{--sheen-d:12.4s;animation-delay:-7.8s} @keyframes heroSheen{ from{background-position:-40% 34%} to{background-position:150% 66%} } /* 포인터 위치를 따라오는 광택 (틸트와 연동) */ .hero-card::before{ content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit; background:radial-gradient(circle at var(--sheen-x) var(--sheen-y), rgba(255,247,226,.40),rgba(176,224,255,.20) 32%,transparent 62%); opacity:var(--sheen-o);mix-blend-mode:screen; transition:opacity .5s ease; } /* ---------------- 오늘의 자개빛 ---------------- */ .daily{ display:flex;align-items:center;justify-content:center; gap:clamp(12px,3.4vw,18px);margin:0 0 clamp(16px,2.8vw,24px); } .daily-copy{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:start} .daily-label{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft)} .daily-card{ flex:0 0 auto; width:clamp(62px,17.5vw,86px);aspect-ratio:2/3;padding:0;border:0;background:transparent; perspective:1000px;cursor:pointer;border-radius:9px; } .daily-card:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px} .daily-inner{ position:relative;display:block;width:100%;height:100%; transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.7,.2,1); } .daily-card.flipped .daily-inner{transform:rotateY(180deg)} .daily-face{ position:absolute;inset:0;display:block;border-radius:9px;overflow:hidden; backface-visibility:hidden;-webkit-backface-visibility:hidden; } .daily-back{ background: radial-gradient(circle at 50% 18%,rgba(216,184,120,.22),transparent 55%), repeating-linear-gradient(45deg,rgba(216,184,120,.07) 0 2px,transparent 2px 9px), linear-gradient(160deg,#131019,#0a0810); border:1px solid rgba(216,184,120,.34); display:flex;align-items:center;justify-content:center; } .daily-back::after{content:"✦";color:var(--gold);font-size:18px;opacity:.85} .daily-card:hover .daily-back{border-color:rgba(216,184,120,.6)} .daily-front{ transform:rotateY(180deg);background:#0a0a0d;border:1px solid rgba(216,184,120,.28); } .daily-front img{width:100%;height:100%;object-fit:cover;display:block} .daily-flash{ position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(circle at 50% 48%, rgba(255,246,226,.95),rgba(196,228,255,.45) 38%,rgba(232,180,255,.22) 58%,transparent 72%); } .daily-card.flash .daily-flash{animation:dailyFlash .95s ease-out} @keyframes dailyFlash{ 0%{opacity:0;transform:scale(.55)} 32%{opacity:.95} 100%{opacity:0;transform:scale(1.6)} } .daily-text{margin:0;min-height:17px;font-size:12.5px;color:var(--ink-dim);letter-spacing:.02em;text-align:start;line-height:1.45} .daily-text b{color:#f3ecdf;font-weight:600} /* 뒤집은 뒤 의미 템플릿 (TARO-BUILD-08): 이름·방향 / 키워드 / 의미 문장 */ .daily-line{display:block} .daily-name{margin:0 0 2px} .daily-keywords{margin:0 0 5px;font-size:11.5px;line-height:1.5;color:var(--gold-soft);letter-spacing:.02em} .daily-kw-label{color:rgba(216,184,120,.7)} .daily-meaning{color:var(--ink-dim);line-height:1.55;text-wrap:pretty} /* 역방향은 카드 아트를 180도 돌려 보여준다 */ .daily-card.is-reversed .daily-front img{transform:rotate(180deg)} @media (max-width:420px){ .hero{--hero-h:clamp(150px,23vh,196px)} .daily{gap:11px} .daily-text{font-size:12px} /* 좁은 화면은 의미 템플릿이 5~6줄로 늘어난다. 한 줄이라도 덜 접히도록 키워드·의미만 살짝 작게 조판한다(이름 줄은 그대로). */ .daily-keywords{font-size:11px;line-height:1.45;margin-bottom:4px} .daily-meaning{font-size:11.5px;line-height:1.5} /* 뒤집힌 상태에서 블록이 길어지므로 여백을 조금 회수한다 */ body.daily-open .daily{margin-bottom:10px} body.daily-open .tagline{margin-bottom:12px} } /* 낮은 화면(예: 375x667): 입력창이 스크롤 없이 들어오도록 히어로·태그라인 여백을 줄인다 */ @media (max-height:700px){ .hero{--hero-h:clamp(132px,21vh,168px)} .tagline{margin-bottom:20px} } /* ================= TARO-BUILD-08: 데스크톱 히어로 확대 ================= */ /* 좁은 화면은 지금 크기가 상한이지만(입력창 노출 때문), 넓은 화면에서는 카드가 화면 대비 작아 보였다(--hero-w 상한 100px = main 760px의 13%). 카드 폭을 1차 변수로 두고(화면 높이에 비례, 최대 190px), 히어로 박스 높이를 그 폭에서 파생시켜(1.75배) 부채꼴 비율을 유지한 채 확대한다. 세로 상한은 calc(100vh - 535px) 이다. 데스크톱에서 히어로를 뺀 나머지 (상단바 + main 여백 + 오늘의 카드 + 태그라인 + 라벨 + 입력창)가 약 515px 이므로, 20px 여유를 두고 입력창이 항상 스크롤 없이 보이게 한다. 하드 브레이크포인트를 두지 않아 1366x768 같은 흔한 노트북에서도 구간 경계로 크기가 역전되지 않는다. */ @media (min-width:900px){ main{padding-top:clamp(28px,3.2vw,42px)} .tagline{margin-bottom:26px} .daily{margin-bottom:clamp(14px,1.8vw,20px)} .hero{ /* 카드 폭이 1차 변수다. 기존 상한 100px 는 main 760px 대비 13%라 데스크톱에서 작아 보였다. 상한 190px(≈2배), 하한 96px. 세로 예산(100vh - 535px)을 넘지 않도록 예산/1.75 로도 제한한다 — 회전한 카드의 바운딩박스가 약 1.69×카드폭이라 1.75배가 필요하다. */ --hero-w:min(clamp(96px,19vh,190px), calc((100vh - 535px) / 1.75)); --hero-h:calc(var(--hero-w) * 1.75); --fan-x:calc(var(--hero-w) * .52); /* 회전한 카드가 박스 아래로 ~0.13×카드폭 삐져나오므로 여백도 비례시킨다 */ margin-bottom:max(clamp(14px,1.8vw,20px), calc(var(--hero-w) * .19)); } } /* 움직임 최소화: 모든 히어로 모션을 끄고 정적 팬으로 보여준다 */ @media (prefers-reduced-motion:reduce){ .hero-aurora,.hero-particles i,.hero-sheen, .hero-card,.hero-card .hero-art,.hero-card::after{ animation:none!important; } .hero-card{opacity:1;scale:1;translate:0 0} .hero-card::before{opacity:0} .hero-fan{transform:none;transition:none} .daily-inner{transition:none} .daily-card.flash .daily-flash{animation:none} } /* ═══════════════════════════════════════════════════════════════ 나전칠기 리디자인 — 1) 질문 화면 (2026-11-13) · 옻칠 바탕 + 자개 포인트 + 단청 띠. HTML/JS 변경 없음. · 본문 대비: #EFE7D8 15.98:1 · #B9B0A2 9.16:1 (AA 통과) ═══════════════════════════════════════════════════════════════ */ /* ── 바탕: 차가운 검정·보라 → 따뜻한 옻칠 (은은한 광택 2겹) ── */ body{ background-color:var(--bg); background-image: radial-gradient(120% 80% at 50% -18%, rgba(210,166,96,.15), transparent 64%), radial-gradient(90% 62% at 100% 4%, rgba(32,80,100,.13), transparent 66%), radial-gradient(70% 55% at 0% 100%, rgba(165,29,12,.05), transparent 62%), linear-gradient(180deg,#12100C 0%,#0E0B07 46%,#0B0805 100%); } body[dir="rtl"]{ background-image: radial-gradient(120% 80% at 50% -18%, rgba(210,166,96,.15), transparent 64%), radial-gradient(90% 62% at 0% 4%, rgba(32,80,100,.10), transparent 64%), radial-gradient(70% 55% at 100% 100%, rgba(165,29,12,.05), transparent 62%), linear-gradient(180deg,#12100C 0%,#0E0B07 46%,#0B0805 100%); } /* ── 상단바: 차가운 1px 선 → 단청 띠 ── */ .topbar{ border-bottom:0; background:linear-gradient(180deg,rgba(20,16,11,.92),rgba(14,11,7,.55)); position:relative; } .topbar::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:16px; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 16px; opacity:.62;pointer-events:none; } .brand-mark{ width:15px;height:15px;font-size:0;line-height:0;color:transparent; background:var(--pat-medal) center/contain no-repeat;flex:0 0 auto; } .brand-name{ font-family:var(--font-title); color:var(--dc-gold-light);font-weight:700; } .lang-picker select{ border-radius:4px;border-color:var(--line); background:linear-gradient(180deg,rgba(27,21,16,.6),rgba(14,11,7,.65)); color:var(--ink-dim); } .lang-picker select:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px} /* ── 제목: 자개 그라디언트 ── */ .tagline,.spread-title,.section-title,.modal-title{font-family:var(--font-title);font-weight:400} .tagline{ background:var(--nacre);-webkit-background-clip:text;background-clip:text;color:transparent; letter-spacing:0; filter:drop-shadow(0 1px 10px rgba(199,205,208,.10)); } @supports not ((background-clip:text) or (-webkit-background-clip:text)){ .tagline{color:var(--ink)} } /* 제목 아래 짧은 단청 띠 */ .tagline::after{ width:76px;height:10px;margin-top:20px;background:none; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 10px; opacity:.7; } /* ── 입력: 알약/둥근 모서리 → 함의 장석 느낌(살짝 각) ── */ .field-label{color:var(--gold-soft);letter-spacing:.18em} textarea,.focus-note,.modal-card input{ border-radius:7px; background:linear-gradient(180deg,rgba(27,21,16,.55),rgba(14,11,7,.7)); border-color:var(--line); } textarea:focus,.focus-note:focus,.modal-card input:focus{ border-color:rgba(210,166,96,.55); background:linear-gradient(180deg,rgba(32,25,18,.7),rgba(14,11,7,.75)); box-shadow:0 0 0 1px rgba(191,147,78,.18) inset; } textarea::placeholder,.focus-note::placeholder{color:var(--ink-faint)} /* ── 스프레드 카드: 나전칠기 패널 ── */ .spread{ border-radius:6px;border-color:var(--line); background:linear-gradient(180deg,rgba(27,21,16,.55),rgba(14,11,7,.78)); position:relative;overflow:hidden; transition:border-color .2s,box-shadow .25s,transform .18s,background .25s; } .spread::after{ /* 자개 빛 스침 */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(112deg,transparent 38%,rgba(199,205,208,.16) 50%,rgba(210,166,96,.12) 56%,transparent 68%); transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.7,.2,1); } .spread:hover{border-color:rgba(191,147,78,.42);transform:translateY(-1px)} .spread:hover::after{transform:translateX(130%)} .spread[aria-checked="true"]{ border-color:rgba(199,205,208,.42); background: linear-gradient(180deg,rgba(32,80,100,.12),rgba(14,11,7,.82)), var(--lacquer-700); box-shadow: 0 0 0 1px rgba(191,147,78,.40) inset, 0 0 22px rgba(135,166,154,.10), 0 10px 24px rgba(0,0,0,.35); } .spread b{font-weight:700} .spread i{color:var(--gold-soft)} /* ── 버튼: 알약 → 장석(살짝 각) ── */ .primary,.ghost,.account-btn,.plan,.history-item,.follow-chip{ border-radius:6px; } .primary{ position:relative;overflow:hidden; border:1px solid rgba(191,147,78,.62); background:linear-gradient(180deg,rgba(210,166,96,.15),rgba(14,11,7,.55)),var(--lacquer-700); box-shadow:inset 0 0 0 1px rgba(199,205,208,.12),0 10px 24px rgba(0,0,0,.42); color:var(--ink); } .primary::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(112deg,transparent 38%,rgba(199,205,208,.20) 50%,rgba(210,166,96,.14) 57%,transparent 70%); transform:translateX(-135%);transition:transform .75s cubic-bezier(.2,.7,.2,1); } .primary:hover{background:linear-gradient(180deg,rgba(210,166,96,.22),rgba(14,11,7,.55)),var(--lacquer-700); border-color:rgba(210,166,96,.85)} .primary:hover::after{transform:translateX(135%)} .primary:focus-visible{outline:2px solid var(--dc-gold-light);outline-offset:3px} .ghost{ border-color:var(--line);color:var(--ink-dim); background:linear-gradient(180deg,rgba(27,21,16,.35),rgba(14,11,7,.35)); } .ghost:hover{color:var(--ink);border-color:rgba(191,147,78,.5)} .account-btn{border-color:var(--line);background:linear-gradient(180deg,rgba(27,21,16,.5),rgba(14,11,7,.5))} .badge{border-radius:4px} .badge-premium{background:var(--dc-gold-light);border-color:var(--dc-gold-light);color:#1a1712} /* ── 요금제/히스토리(같은 화면 하단) ── */ .plan{border-color:var(--line);background:linear-gradient(180deg,rgba(27,21,16,.55),rgba(14,11,7,.72))} .plan:hover{border-color:rgba(191,147,78,.45);background:linear-gradient(180deg,rgba(32,80,100,.12),rgba(14,11,7,.75))} .plan span{color:var(--dc-gold-light)} .history-item{border-color:var(--line);background:rgba(20,16,11,.55)} .plans-box,.history-box{border-top:1px solid var(--line)} .plans-box{position:relative} /* ── 히어로: 카드에 자개 테두리 + 깊은 그림자 (JS 틸트는 그대로) ── */ .hero-aurora{ background: radial-gradient(closest-side at 26% 36%, rgba(32,80,100,.34), transparent 74%), radial-gradient(closest-side at 74% 28%, rgba(135,166,154,.22), transparent 76%), radial-gradient(closest-side at 50% 84%, rgba(210,166,96,.24), transparent 78%); opacity:.9; } /* 배경·그림자는 원래 규칙을 그대로 둔다. 여기서 box-shadow를 덮으면(특히 calc 섞인 0 0 0 1px + 큰 그림자) 이 Chromium에서 카드 이미지가 통째로 안 그려지는 현상이 있었다. 금테는 border로만 준다. */ .hero-card{ border:1px solid rgba(191,147,78,.30) } .hero-sheen{ background:radial-gradient(120px 120px at var(--sheen-x) var(--sheen-y), rgba(236,209,162,.18), rgba(199,205,208,.08) 45%, transparent 70%); opacity:var(--sheen-o); } /* ── 오늘의 자개빛: 뒷면을 공용 카드 뒷면으로 ── */ .daily-back{ background-color:var(--lacquer-700); background-image:var(--card-back-image); background-size:var(--card-back-size); background-position:var(--card-back-position); background-repeat:var(--card-back-repeat); border:1px solid rgba(191,147,78,.4); box-shadow:inset 0 0 0 1px rgba(191,147,78,.18),0 8px 18px rgba(0,0,0,.5); } .daily-back::after{content:none} .daily-card:hover .daily-back{border-color:rgba(210,166,96,.7)} .daily-front{border-color:rgba(191,147,78,.35);background:var(--lacquer-800)} .daily-label{color:var(--gold-soft);letter-spacing:.22em} .daily-text{color:var(--ink-dim)} /* ── 공용 카드 뒷면 (같은 변수 하나로 세 곳이 함께 바뀐다) ── */ .face-back,.pick-card{ background-color:var(--lacquer-700); background-image:var(--card-back-image); background-size:var(--card-back-size); background-position:var(--card-back-position); background-repeat:var(--card-back-repeat); } .face-back{border:1px solid rgba(191,147,78,.42)} .face-back::after{content:none} .pick-card{border-color:rgba(191,147,78,.4);box-shadow:-10px 0 16px rgba(0,0,0,.5)} .pick-card::after{content:none} /* ── 모션 최소화: 빛 스침·부유 애니메이션 끔 ── */ @media (prefers-reduced-motion:reduce){ .spread::after,.primary::after{display:none} .hero-particles,.hero-aurora,.hero-card{animation:none !important} .spread:hover{transform:none} } /* ═══════════════════════════════════════════════════════════════ 나전칠기 리디자인 — 2) 카드 선택 / 공개 화면 ═══════════════════════════════════════════════════════════════ */ /* 뽑기 트레이: 옻칠 쟁반 위에 카드가 겹쳐 놓인 느낌 */ .pick-strip{ background: radial-gradient(120% 70% at 50% 0%, rgba(210,166,96,.06), transparent 62%), linear-gradient(180deg, rgba(23,18,9,.55), rgba(11,8,5,.55)); border-radius:8px; box-shadow: inset 0 0 0 1px rgba(191,147,78,.14), inset 0 14px 26px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35); } /* 트레이 위·아래 단청 띠 */ #screen-pick .pick-strip{position:relative} #screen-pick .pick-strip::before{ content:"";position:absolute;left:0;right:0;top:0;height:10px;pointer-events:none; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 10px; opacity:.42;border-radius:8px 8px 0 0; } /* 위치 슬롯: 장석을 박은 빈 자리 */ .pick-slot{ border-radius:6px;border:1px dashed rgba(191,147,78,.32); background:linear-gradient(180deg, rgba(23,18,9,.5), rgba(11,8,5,.55)); color:var(--ink-faint); } .pick-slot b{color:#7a7367} .pick-slot.filled{ border-style:solid;border-color:rgba(199,205,208,.45); background:linear-gradient(180deg, rgba(32,80,100,.16), rgba(14,11,7,.7)); box-shadow:0 0 0 1px rgba(191,147,78,.35) inset, 0 0 16px rgba(135,166,154,.12); color:var(--dc-gold-pale); } .pick-slot.filled b{color:var(--dc-gold-light)} .pick-progress{color:var(--ink-dim)} .pick-progress.is-ready{color:var(--dc-gold-light)} /* 겹친 카드: 자개 테두리 + 선택 시 빛 */ .pick-card{ box-shadow: -10px 0 18px rgba(0,0,0,.55), 0 0 0 1px rgba(191,147,78,.35); } .pick-card[aria-pressed="true"]{ border-color:rgba(199,205,208,.65); box-shadow: 0 12px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(199,205,208,.45) inset, 0 0 22px rgba(135,166,154,.18); } .pick-card .order{ background:var(--dc-gold-light);color:#1a1712;border-radius:3px; box-shadow:0 0 0 1px rgba(11,8,5,.5); } /* 공개(뒤집기) 카드 */ .card-label{color:var(--gold-soft);letter-spacing:.1em} .face-front{border:1px solid rgba(191,147,78,.42);box-shadow:0 18px 40px rgba(0,0,0,.55)} .card.revealed .face-front::after{ /* 뒤집을 때 자개 빛 한 번 */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(118deg,transparent 34%,rgba(236,209,162,.22) 50%,rgba(199,205,208,.16) 58%,transparent 74%); animation:flutterSheen .9s ease-out both; } @keyframes flutterSheen{ 0%{opacity:0;transform:translateX(-40%)} 35%{opacity:1} 100%{opacity:0;transform:translateX(40%)} } /* ═══════════════════════════════════════════════════════════════ 나전칠기 리디자인 — 3) 해석 화면 ═══════════════════════════════════════════════════════════════ */ /* 제목 아래 단청 헤어라인 */ #readTitle{position:relative;padding-bottom:12px} #readTitle::after{ content:"";position:absolute;left:0;bottom:0;width:64px;height:8px; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 8px; opacity:.6; } body[dir="rtl"] #readTitle::after{left:auto;right:0} .question-echo{ border-left:2px solid rgba(191,147,78,.45); background:linear-gradient(90deg, rgba(32,80,100,.10), transparent 70%); padding:10px 12px;border-radius:0 6px 6px 0;color:var(--ink-dim); } body[dir="rtl"] .question-echo{ border-left:0;border-right:2px solid rgba(191,147,78,.45); background:linear-gradient(270deg, rgba(32,80,100,.10), transparent 70%); border-radius:6px 0 0 6px; } /* 해석 본문 */ .interpretation{color:var(--ink)} .thinking{color:var(--ink-faint)} /* 섹션 구분(후속 질문·공유) — 얇은 단청 띠 */ .follow-box,.share-box{border-top:0;position:relative;padding-top:30px} .follow-box::before,.share-box::before{ content:"";position:absolute;left:0;right:0;top:0;height:9px; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 9px; opacity:.42; } .follow-hint{color:var(--gold-soft)} .follow-chip{ border-color:var(--line); background:linear-gradient(180deg, rgba(27,21,16,.55), rgba(11,8,5,.6)); border-radius:6px; } .follow-chip:hover{ border-color:rgba(191,147,78,.5); background:linear-gradient(180deg, rgba(32,80,100,.12), rgba(14,11,7,.7)); } .follow-form input{ border-radius:7px;border-color:var(--line); background:linear-gradient(180deg, rgba(27,21,16,.5), rgba(11,8,5,.62)); } .follow-answer{border-left:2px solid rgba(191,147,78,.3)} body[dir="rtl"] .follow-answer{border-left:0;border-right:2px solid rgba(191,147,78,.3)} .follow-q{color:var(--gold-soft)} /* 클라리파이어 카드 */ .clarifier{ border-radius:8px;border-color:rgba(191,147,78,.28); background:linear-gradient(180deg, rgba(32,80,100,.10), rgba(14,11,7,.72)); } .clarifier-label{color:var(--gold-soft)} .clarifier-card{border-color:rgba(191,147,78,.42);border-radius:6px} .clarifier-meta strong{font-family:var(--font-title);color:var(--ink)} .clarifier-meta span{color:var(--gold-soft)} /* 액션 영역 */ .actions .ghost{padding:12px 22px} @media (prefers-reduced-motion:reduce){ .card.revealed .face-front::after{display:none} } /* 공개 카드 크기: 1장은 크게, 3장은 한 줄에 들어가게 (기존 규칙 복원) */ .deck[data-count="1"] .card{width:clamp(148px,54vw,236px)} .deck[data-count="3"] .card{width:clamp(98px,28vw,158px)} /* ── 섹션 구분 단청 띠 (절제: 8~9px · opacity .32~.4) ── */ .plans-box,.history-box{position:relative;border-top:0;padding-top:26px} .plans-box::before,.history-box::before,.footer::before{ content:"";position:absolute;left:0;right:0;top:0;height:9px;pointer-events:none; background-image:var(--pat-band);background-repeat:repeat-x;background-size:auto 9px; opacity:.36; } .plans-box::before,.history-box::before{top:0} .footer{position:relative;padding-top:34px} .footer::before{top:0;height:8px;background-size:auto 8px;opacity:.3} /* ═══════════════════════════════════════════════════════════════ BUILD-12 §1 — 빛에 반응하는 카드 (자개 반사층) · transform/opacity만 사용. --sheen-* 는 JS가 갱신한다. ═══════════════════════════════════════════════════════════════ */ :root{ --sheen-px:50%; /* 빛의 가로 위치 */ --sheen-py:42%; /* 세로 위치 */ --sheen-ang:112deg; /* 결의 각도 */ --sheen-op:.9; /* 층 불투명도 */ } /* 공통 반사층 — 카드 이미지 위에 얹는다 */ .mini::before, .face-front::before, .daily-front::before, .clarifier-card::before, .cardpage-art::before, .collection-cell:not(.is-locked) .collection-frame::before{ content:"";position:absolute;inset:-60%;pointer-events:none;z-index:3; background-image:linear-gradient(90deg, transparent 34%, rgba(202,216,221,.32) 46%, rgba(236,209,162,.30) 50%, rgba(213,200,219,.31) 54%, transparent 66%); opacity:var(--sheen-op); mix-blend-mode:screen; /* transform 만 움직인다(합성 레이어). 회전이 곧 결의 각도, 이동이 곧 빛의 위치다. */ transform:translate3d(calc((var(--sheen-px) - 50%) * .55), calc((var(--sheen-py) - 50%) * .55), 0) rotate(var(--sheen-ang)); will-change:transform; transition:transform .12s linear; } /* 위치 기준 */ .mini,.face-front,.daily-front,.clarifier-card,.cardpage-art{position:relative;overflow:hidden} /* 기울기 입력이 없을 때: 잔잔한 자동 시머 (효과가 사라지지 않게) */ html:not(.tilt-on) .mini::before, html:not(.tilt-on) .face-front::before, html:not(.tilt-on) .daily-front::before, html:not(.tilt-on) .clarifier-card::before, html:not(.tilt-on) .cardpage-art::before, html:not(.tilt-on) .collection-cell:not(.is-locked) .collection-frame::before{ animation:sheenDrift 11s ease-in-out infinite alternate; } @keyframes sheenDrift{ 0%{transform:translate3d(-17%,-9%,0) rotate(101deg)} 50%{transform:translate3d(2%,1%,0) rotate(117deg)} 100%{transform:translate3d(18%,11%,0) rotate(96deg)} } @media (prefers-reduced-motion:reduce){ .mini::before,.face-front::before,.daily-front::before, .clarifier-card::before,.cardpage-art::before, .collection-cell:not(.is-locked) .collection-frame::before{animation:none !important} :root{--sheen-op:.55} } /* BUILD-12 §2-2 반복 카드 · §2-1 히스토리 회고 메모 */ .repeat-note{ display:block;font-style:normal;font-size:10.5px;line-height:1.35; color:var(--dc-gold-light);opacity:.9;padding:2px 3px 5px;text-align:center;letter-spacing:.02em; } .history-memo{ display:block;font-size:12px;line-height:1.5;color:var(--nac-sage); margin-top:4px;white-space:normal; } .history-memo.is-prompt{color:var(--ink-faint);font-style:italic} /* BUILD-12 §3 친구 링크 버튼 */ .friend-btn{width:100%;margin-top:10px;padding:12px 18px;font-size:13.5px} .friend-msg{margin:10px 0 0;min-height:18px;text-align:center;color:var(--nac-sage)} /* BUILD-13 §7-1 청구정보 모달 · §2-2 결제 결과 */ .billing-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .billing-grid input{width:100%} .checkout-box{ margin:0 0 26px;padding:18px 18px 16px;border-radius:10px; border:1px solid rgba(199,205,208,.35); background:linear-gradient(180deg,rgba(32,80,100,.16),rgba(14,11,7,.75)); box-shadow:0 0 0 1px rgba(191,147,78,.3) inset; } .checkout-box[hidden]{display:none} .checkout-title{font-family:var(--font-title);font-weight:400;font-size:18px;margin:0 0 6px;color:var(--dc-gold-pale)} .checkout-sub{margin:0 0 12px;font-size:13.5px;color:var(--ink-dim)} /* TARO-BLOG-01 §6 카드 → 해설 글 연결 (도감·리딩·오늘의 카드·확대 보기) */ a.mini{color:inherit;text-decoration:none} .mini-read{ display:block;padding:0 4px 9px;text-align:center; font-size:11px;letter-spacing:.06em;color:var(--dc-gold-light,#C89B54);opacity:.92; } .collection-body{display:block;color:inherit;text-decoration:none} .collection-read{ display:block;margin-top:2px;font-size:10.5px;letter-spacing:.03em; color:var(--dc-gold-light,#C89B54);opacity:.9; } .daily-read{ display:inline-block;margin-top:8px;font-size:12.5px;letter-spacing:.03em; color:var(--dc-gold-light,#C89B54);text-decoration:none; } .daily-read:hover{text-decoration:underline} .card-modal-link{ display:block;margin:10px auto 0;text-align:center;font-size:13.5px; color:var(--dc-gold-light,#C89B54);text-decoration:none; } .card-modal-link:hover{text-decoration:underline}