/* 나의 고블린 찾기 (/my-goblin, /en/my-goblin) */
.goblin-finder-page { --gb-ink:#f4ead2; --gb-soft:#c9c2d8; --gb-gold:#d9c48f; --gb-panel:rgba(20,24,52,.78); --gb-line:rgba(217,196,143,.35);
  --gb-common:#cfc6a8; --gb-rare:#8fc4ff; --gb-epic:#d6a6ff; --gb-legendary:#f2cf72;
  background:radial-gradient(circle at 50% 0%,#2a3366 0%,#141936 45%,#0b0e20 100%) fixed; color:var(--gb-ink) }
.goblin-finder-page.gb-season-halloween { background:radial-gradient(circle at 50% 0%,#4a2a55 0%,#1d1530 45%,#0b0a16 100%) fixed }
.goblin-finder-page.gb-season-christmas { background:radial-gradient(circle at 50% 0%,#1f4a3a 0%,#152a2c 45%,#0a1214 100%) fixed }
.gb-season-christmas .gb-season-note { background:rgba(80,190,120,.14); border-color:rgba(110,210,140,.45); color:#c6f0d2 }
html.theme-light .gb-season-christmas .gb-season-note { color:#1d6b3a }
html.theme-light .goblin-finder-page { --gb-ink:#2a2140; --gb-soft:#5d5672; --gb-gold:#9a7a2e; --gb-panel:rgba(255,252,244,.92); --gb-line:rgba(154,122,46,.35);
  background:radial-gradient(circle at 50% 0%,#fff7e3 0%,#f3ead6 60%,#ece2cc 100%) fixed }
.gb-shell { max-width:760px; margin:0 auto; padding:28px 16px 120px }
.gb-hero { text-align:center; padding:12px 0 8px }
.gb-kicker { display:inline-block; font-size:12px; letter-spacing:.18em; color:var(--gb-gold); border:1px solid var(--gb-line); border-radius:999px; padding:6px 12px }
.gb-hero h1 { margin:16px 0 10px; font-size:clamp(28px,7vw,42px); line-height:1.25; color:var(--gb-ink); word-break:keep-all }
.gb-hero h1 em { font-style:normal; color:var(--gb-gold) }
.gb-lead { margin:0 auto; max-width:520px; color:var(--gb-soft); line-height:1.7; word-break:keep-all }
.gb-season-note { margin:14px auto 0; display:inline-block; padding:8px 14px; border-radius:12px; background:rgba(255,140,40,.14); border:1px solid rgba(255,160,70,.45); color:#ffcf9a; font-weight:700 }
html.theme-light .gb-season-note { color:#9a4a0e }
.gb-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.gb-form-wrap { margin:24px auto 0; max-width:440px }
.gb-form { display:grid; gap:8px; padding:22px; border:1px solid var(--gb-line); border-radius:18px; background:var(--gb-panel) }
.gb-form label { font-size:14px; font-weight:700; color:var(--gb-gold); margin-top:6px }
.gb-form input { min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid var(--gb-line); background:rgba(0,0,0,.2); color:var(--gb-ink); font:inherit; font-size:16px }
html.theme-light .gb-form input { background:#fff }
.gb-form input:focus-visible, .gb-form button:focus-visible { outline:3px solid var(--gb-gold); outline-offset:2px }
.gb-error { min-height:1.2em; margin:4px 0 0; color:#ff9b9b; font-size:14px }
html.theme-light .gb-error { color:#b3261e }
.gb-submit, .gb-primary-btn { min-height:52px; border:0; border-radius:14px; background:linear-gradient(180deg,#e6cf8f,#c9a85a); color:#1b1630; font:inherit; font-size:17px; font-weight:800; cursor:pointer }
.gb-privacy { margin:4px 0 0; font-size:12.5px; color:var(--gb-soft); text-align:center }
.gb-result { margin-top:34px }
.gb-result > h2 { text-align:center; font-size:24px; color:var(--gb-ink); margin:0 0 18px; outline:none }
.gb-cards { display:grid; gap:22px }
@media (min-width:720px) { .gb-cards:has(.gb-card + .gb-card) { grid-template-columns:1fr 1fr } }
.gb-card { --tier:var(--gb-common); position:relative; padding:18px 18px 20px; border-radius:22px; border:2px solid var(--tier); background:var(--gb-panel); text-align:center }
.gb-rare { --tier:var(--gb-rare); box-shadow:0 0 22px rgba(143,196,255,.25) }
.gb-epic { --tier:var(--gb-epic); box-shadow:0 0 30px rgba(214,166,255,.35) }
.gb-legendary { --tier:var(--gb-legendary); box-shadow:0 0 40px rgba(242,207,114,.45); animation:gb-glow 3s ease-in-out infinite }
@keyframes gb-glow { 50% { box-shadow:0 0 60px rgba(242,207,114,.7) } }
@media (prefers-reduced-motion:reduce) { .gb-legendary { animation:none } }
.gb-event { border-style:double; border-width:4px }
.gb-label { margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--tier) }
.gb-art { margin:0 auto; max-width:300px; border-radius:16px; overflow:hidden; border:2px solid var(--tier); aspect-ratio:2/3; background:#0b0e20 }
.gb-art img { display:block; width:100%; height:100%; object-fit:cover }
.gb-art-soon { margin:0 auto; max-width:300px; padding:10px; border-radius:12px; border:1px dashed var(--tier); color:var(--gb-soft); font-size:13px }
.gb-tier { margin:14px 0 4px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.gb-tier span { font-size:12.5px; font-weight:800; padding:4px 10px; border-radius:999px; border:1px solid var(--tier); color:var(--tier) }
.gb-tier .gb-season { border-color:rgba(255,160,70,.6); color:#ffb870 }
.gb-tier .gb-season-christmas { border-color:rgba(230,90,90,.6); color:#ff9f9f }
.gb-name { margin:6px 0 4px; font-size:26px; color:var(--gb-ink); word-break:keep-all }
.gb-title { margin:0 0 12px; color:var(--gb-gold); font-weight:700; word-break:keep-all }
.gb-traits { list-style:none; padding:0; margin:0 0 12px; display:flex; gap:6px; justify-content:center; flex-wrap:wrap }
.gb-traits li { font-size:13px; padding:5px 10px; border-radius:999px; background:rgba(217,196,143,.12); color:var(--gb-ink) }
.gb-intro { margin:0 0 14px; line-height:1.75; color:var(--gb-ink); word-break:keep-all; text-align:left }
.gb-facts { margin:0; display:grid; gap:10px; text-align:left }
.gb-facts div { padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.18) }
html.theme-light .gb-facts div { background:rgba(154,122,46,.08) }
.gb-facts dt { font-size:12.5px; font-weight:800; color:var(--gb-gold); margin-bottom:3px }
.gb-facts dd { margin:0; line-height:1.65; color:var(--gb-ink); word-break:keep-all }
.gb-actions { margin:22px auto 0; max-width:440px; display:grid; gap:10px }
.gb-kakao-btn { min-height:52px; border:0; border-radius:14px; background:#fee500; color:#191919; font:inherit; font-size:16px; font-weight:800; cursor:pointer }
.gb-kakao-btn[hidden] { display:none }
.gb-secondary-btn { min-height:48px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid var(--gb-line); background:transparent; color:var(--gb-ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:none }
.gb-status { min-height:1.2em; margin:0; text-align:center; font-size:14px; color:var(--gb-gold); word-break:break-all }
.gb-next { margin:26px auto 0; max-width:440px; display:grid; gap:10px }
.gb-next-link { display:block; padding:14px 16px; border-radius:14px; border:1px solid var(--gb-line); background:var(--gb-panel); color:var(--gb-ink); font-weight:800; text-decoration:none }
.gb-next-link small { display:block; margin-top:3px; font-weight:500; color:var(--gb-soft) }
.gb-about { margin:40px auto 0; max-width:620px; color:var(--gb-soft); line-height:1.75 }
.gb-about h2 { color:var(--gb-ink); font-size:20px }
.gb-small { font-size:13px }
.gb-pair { margin: 30px auto 0; max-width: 560px; padding: 22px 18px; border: 1px solid var(--gb-line); border-radius: 20px; background: var(--gb-panel); text-align: center }
.gb-pair h2 { margin: 0 0 6px; font-size: 21px; color: var(--gb-ink) }
.gb-pair-lead { margin: 0 0 14px; color: var(--gb-soft); line-height: 1.6; word-break: keep-all }
.gb-pair-form { padding: 0; border: 0; background: none; text-align: left }
.gb-pair-result { margin-top: 20px }
.gb-pair-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.gb-pair-goblin { --tier: var(--gb-common); display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 2px solid var(--tier); border-radius: 16px; background: rgba(0,0,0,.16) }
.gb-pair-goblin.gb-rare { --tier: var(--gb-rare) } .gb-pair-goblin.gb-epic { --tier: var(--gb-epic) } .gb-pair-goblin.gb-legendary { --tier: var(--gb-legendary) }
.gb-pair-goblin img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; display: block }
.gb-pair-owner { margin-top: 6px; font-size: 13px; color: var(--gb-soft) }
.gb-pair-goblin b { font-size: 16px; color: var(--gb-ink); word-break: keep-all }
.gb-pair-goblin small { font-size: 12px; line-height: 1.5; color: var(--tier); word-break: keep-all }
.gb-pair-score { margin: 18px 0 6px; font-size: 30px; font-weight: 900; color: var(--gb-gold) }
.gb-pair-text { margin: 0 0 8px; line-height: 1.7; color: var(--gb-ink); word-break: keep-all }
.gb-pair-fun { color: var(--gb-soft) }
/* From a compatibility result to a relationship tarot reading. */
.gb-pair-tarot { display: block; margin: 16px 0 8px; padding: 14px 16px; border: 1px solid rgba(242,207,114,.45); border-radius: 14px; background: rgba(242,207,114,.08); color: var(--gb-ink); text-decoration: none; text-align: center }
.gb-pair-tarot b { display: block; font-size: 16px; line-height: 1.5; word-break: keep-all }
.gb-pair-tarot small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--gb-soft); word-break: keep-all }
.gb-pair-tarot:focus-visible { outline: 2px solid var(--gb-gold); outline-offset: 2px }
/* A friend's shared compatibility, shown first on /my-goblin/pair/<a>/<b>. */
.gb-shared-pair { margin: 4px auto 26px }
.gb-shared-pair .gb-kicker { display: block; margin-bottom: 6px }
.gb-shared-pair h2 { margin-bottom: 14px; outline: none }
.gb-shared-pair-cta { display: block; margin: 14px auto 10px; max-width: 360px; padding: 0 18px; line-height: 52px; text-align: center; text-decoration: none }