/* =========================================================
   soraniar UI - 共通デザイントークン & 共通部品
   index.html / explore.html の両方から読み込む
   色・角丸・幅はすべてここのCSS変数で一括調整できる
   ========================================================= */
:root {
    --sky: #68c7f4;
    --sky-light: #a8e5ff;
    --sky-deep: #197fc5;
    --teal: #25b9b2;
    --coral: #ff6268;
    --orange: #ff985d;
    --yellow: #ffd75a;
    --ink: #123461;
    --muted: #60728a;
    --surface: #ffffff;
    --surface-soft: #f6fbff;
    --line: #d9ecf8;

    --shadow-sm: 0 6px 18px rgba(26, 91, 130, .10);
    --shadow: 0 14px 36px rgba(30, 92, 135, .14);
    --shadow-lg: 0 28px 70px rgba(26, 94, 141, .22);

    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;

    --content: 1120px;

    /* iOS のセーフエリア（ノッチ / ホームインジケータ） */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--surface-soft);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.65;
}

button, a, input, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------
   ブランド / ヘッダー
   --------------------------------------------------------- */
.sn-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sky-deep);
}

.sn-brand-mark { width: 46px; height: 36px; flex-shrink: 0; }
.sn-brand-mark svg { width: 100%; height: 100%; display: block; }

.sn-brand-name {
    font-size: clamp(1.9rem, 6vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
    text-shadow: 0 3px 0 rgba(255, 255, 255, .9);
}

.sn-icon-button {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 5px;
    padding: 0 13px;
    flex-shrink: 0;
}

.sn-icon-button span {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--sky-deep);
}

/* ---------------------------------------------------------
   ボタン
   --------------------------------------------------------- */
.sn-button {
    min-height: 56px;
    border-radius: 999px;
    padding: 0 26px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.sn-button:active { transform: scale(.97); }
@media (hover: hover) {
    .sn-button:hover { transform: translateY(-2px); }
}

.sn-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.sn-button-primary {
    color: #fff;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--coral), var(--orange));
    box-shadow: 0 14px 28px rgba(255, 98, 104, .28);
}

.sn-button-secondary {
    background: #fff;
    color: var(--sky-deep);
    border: 2px solid var(--sky-deep);
}

.sn-button-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: var(--coral);
    flex-shrink: 0;
}

.sn-button-icon svg { width: 16px; height: 16px; }

.sn-text-link {
    border: 0;
    background: transparent;
    color: var(--sky-deep);
    font-weight: 900;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sn-text-link .chev { font-size: 1.25em; line-height: 1; }

/* フォーカスリング（キーボード操作時のみ） */
.sn-button:focus-visible,
.sn-text-link:focus-visible,
.sn-icon-button:focus-visible,
.sn-card:focus-visible {
    outline: 4px solid rgba(255, 215, 90, .85);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   セクション見出し
   --------------------------------------------------------- */
.sn-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sn-section-head h2 {
    margin: 0;
    font-size: clamp(1.3rem, 4.2vw, 1.9rem);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sn-count-badge {
    display: inline-flex;
    padding: 3px 10px;
    background: #edf4f9;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
}

/* ---------------------------------------------------------
   カード
   --------------------------------------------------------- */
.sn-card {
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid #edf4f8;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* キャラクターピンをカード画像として見せるための枠 */
.sn-thumb {
    aspect-ratio: 4 / 3;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, #b6ecff 0%, #e9fbff 52%, #a8dcb4 52%, #8bc69a 100%);
}

/* キャラピンの背景テーマ。.sn-thumb と .sn-news-thumb の両方で使う */
.theme-1 { background: linear-gradient(150deg, #ffd0cf 0%, #fff3dc 52%, #9ed0aa 52%, #79bc89 100%); }
.theme-2 { background: linear-gradient(150deg, #cdeaff 0%, #eefaff 52%, #a5d9c6 52%, #7cc2a8 100%); }
.theme-3 { background: radial-gradient(circle at 68% 26%, #fff 0 3%, transparent 3.6%), linear-gradient(150deg, #1e3a6d, #5550a4 56%, #233a63 56%); }

.sn-thumb img {
    position: relative;
    width: auto;
    max-width: 72%;
    max-height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0, 60, 95, .25));
}

.sn-thumb-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    color: #fff;
    background: var(--coral);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sn-thumb-badge.teal { background: var(--teal); }
.sn-thumb-badge.purple { background: #7d6ae0; }

/* ---------------------------------------------------------
   ドロワーメニュー
   --------------------------------------------------------- */
.sn-drawer {
    position: fixed;
    z-index: 1200;
    right: 0;
    top: 0;
    height: 100dvh;
    width: min(84vw, 340px);
    background: #fff;
    padding: calc(64px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
    box-shadow: -20px 0 45px rgba(18, 52, 97, .18);
    transform: translateX(105%);
    transition: transform .22s ease;
    overflow-y: auto;
}

.sn-drawer.is-open { transform: translateX(0); }

.sn-drawer-close {
    position: absolute;
    top: calc(12px + var(--safe-top));
    right: 16px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink);
}

.sn-drawer nav { display: grid; gap: 2px; }

.sn-drawer nav a {
    padding: 15px 6px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
    font-weight: 800;
}

.sn-drawer-backdrop {
    position: fixed;
    z-index: 1199;
    inset: 0;
    background: rgba(8, 26, 48, .42);
}

/* ---------------------------------------------------------
   トースト
   --------------------------------------------------------- */
#toast-container {
    position: fixed;
    z-index: 2000;
    left: 50%;
    bottom: calc(24px + var(--safe-bottom));
    transform: translateX(-50%);
    display: grid;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: min(90vw, 420px);
}

.toast {
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(18, 52, 97, .92);
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    text-align: center;
    box-shadow: var(--shadow);
    animation: sn-toast 3s ease forwards;
}

@keyframes sn-toast {
    0% { opacity: 0; transform: translateY(12px); }
    12%, 82% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------------------------------------------------------
   広告枠（既存 common.js の displayAdvertisement が
   .ad-container / .show を操作する前提を維持）
   --------------------------------------------------------- */
.ad-container {
    display: none;
    margin: 20px auto;
    max-width: 728px;
    width: 100%;
}

.ad-container.show { display: block; }
.ad-container img { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ---------------------------------------------------------
   ユーティリティ
   --------------------------------------------------------- */
.sn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}