/* ==========================================================================
   Material 3 デザイントークン
   色は script.js が選択中の辞書の色（シード）から動的に生成して上書きする。
   ここにあるのは JS 実行前・無効時の既定値。
   ========================================================================== */
:root{
  --md-primary:#365da2;--md-on-primary:#ffffff;--md-primary-container:#dae2ff;--md-on-primary-container:#001b3d;--md-inverse-primary:#b3c5ff;
  --md-secondary-container:#dae2ff;--md-on-secondary-container:#0f1b33;
  --md-surface:#f8f9ff;--md-surface-container-lowest:#ffffff;--md-surface-container-low:#f2f3fb;--md-surface-container:#ecedf5;--md-surface-container-high:#e6e8ef;--md-surface-container-highest:#e1e2ea;
  --md-on-surface:#1a1b21;--md-on-surface-variant:#434654;--md-outline:#737686;--md-outline-variant:#c2c6d7;
  --md-inverse-surface:#2f3036;--md-inverse-on-surface:#eff0f8;
  --md-scrim:#000000;

  --md-font:"M PLUS 1","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;

  --md-shape-xs:4px;--md-shape-sm:8px;--md-shape-md:12px;--md-shape-lg:16px;--md-shape-xl:28px;--md-shape-full:999px;

  --md-elevation-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elevation-2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --md-elevation-3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);

  --md-easing-standard:cubic-bezier(.2,0,0,1);
  --md-easing-emphasized-decelerate:cubic-bezier(.05,.7,.1,1);
  --md-easing-emphasized-accelerate:cubic-bezier(.3,0,.8,.15);

  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  --icon-history:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z'/%3E%3C/svg%3E");
  --icon-north-west:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 15h2V8.41L18.59 20 20 18.59 8.41 7H15V5H5z'/%3E%3C/svg%3E");
  --icon-arrow-drop-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

  color-scheme:light;
}

html[data-theme="dark"]{
  --md-primary:#b3c5ff;--md-on-primary:#003063;--md-primary-container:#104687;--md-on-primary-container:#dae2ff;--md-inverse-primary:#365da2;
  --md-secondary-container:#3d4662;--md-on-secondary-container:#dae2ff;
  --md-surface:#121319;--md-surface-container-lowest:#0c0e15;--md-surface-container-low:#1a1b21;--md-surface-container:#1e1f25;--md-surface-container-high:#282a2f;--md-surface-container-highest:#33343a;
  --md-on-surface:#e1e2ea;--md-on-surface-variant:#c2c6d7;--md-outline:#8c90a0;--md-outline-variant:#434654;
  --md-inverse-surface:#e1e2ea;--md-inverse-on-surface:#2f3036;
  color-scheme:dark;
}

@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --md-primary:#b3c5ff;--md-on-primary:#003063;--md-primary-container:#104687;--md-on-primary-container:#dae2ff;--md-inverse-primary:#365da2;
    --md-secondary-container:#3d4662;--md-on-secondary-container:#dae2ff;
    --md-surface:#121319;--md-surface-container-lowest:#0c0e15;--md-surface-container-low:#1a1b21;--md-surface-container:#1e1f25;--md-surface-container-high:#282a2f;--md-surface-container-highest:#33343a;
    --md-on-surface:#e1e2ea;--md-on-surface-variant:#c2c6d7;--md-outline:#8c90a0;--md-outline-variant:#434654;
    --md-inverse-surface:#e1e2ea;--md-inverse-on-surface:#2f3036;
    color-scheme:dark;
  }
}

/* ==========================================================================
   ベース
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--md-font)}
body{background-color:var(--md-surface);color:var(--md-on-surface);font-size:1rem;line-height:1.5;transition:background-color .3s var(--md-easing-standard),color .3s var(--md-easing-standard)}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
p,h1,h2,h3{margin:0}
.hide{display:none!important}

:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}

/* ステートレイヤー（ホバー 8% / フォーカス・押下 10%）とリップル */
.icon-button,.tab,.btn-search,.dict-pill,.history-item,.settings-nav__item,.settings-action,.settings-mode label,.install-banner__button,.install-banner__dismiss{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--_bg,transparent);
  transition:background-color .2s var(--md-easing-standard),color .2s var(--md-easing-standard),border-color .2s var(--md-easing-standard),box-shadow .2s var(--md-easing-standard),padding .2s var(--md-easing-standard);
}
:is(.icon-button,.tab,.btn-search,.dict-pill,.history-item,.settings-nav__item,.settings-action,.settings-mode label,.install-banner__button,.install-banner__dismiss):hover{background-color:color-mix(in srgb,currentColor 8%,var(--_bg,transparent))}
:is(.icon-button,.tab,.btn-search,.dict-pill,.history-item,.settings-nav__item,.settings-action,.install-banner__button,.install-banner__dismiss):is(:focus-visible,:active),.settings-mode label:has(input:focus-visible){background-color:color-mix(in srgb,currentColor 10%,var(--_bg,transparent))}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.12;transform:scale(0);pointer-events:none;z-index:-1;animation:ripple .55s var(--md-easing-standard) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* アイコンボタン（standard） */
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--md-shape-full);color:var(--md-on-surface-variant);cursor:pointer;flex:none}

/* ==========================================================================
   トップアプリバー + タブ
   ========================================================================== */
.wrapper{width:100%}
.top-app-bar{position:sticky;top:0;z-index:20;background:var(--md-surface);transition:background-color .3s var(--md-easing-standard)}
.top-app-bar.is-scrolled{background:var(--md-surface-container)}
.top-app-bar__row{display:flex;align-items:center;gap:12px;max-width:880px;height:64px;margin:0 auto;padding:0 12px 0 20px}
.top-app-bar__logo{width:32px;height:32px;border-radius:var(--md-shape-sm)}
.top-app-bar__title{flex:1;font-size:1.375rem;line-height:1.75rem;font-weight:400;letter-spacing:0;color:var(--md-on-surface)}

.tabs{border-bottom:1px solid var(--md-outline-variant)}
.tabs__list{display:flex;max-width:880px;margin:0 auto;padding:0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs__list::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;display:flex;justify-content:center;height:48px;padding:0 16px;border:0;border-radius:0;color:var(--md-on-surface-variant);font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap}
.tab__label{position:relative;display:flex;align-items:center;height:100%}
.tab__label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-primary);transform:scaleX(0);transition:transform .3s var(--md-easing-emphasized-decelerate)}
.tab.active{color:var(--md-primary)}
.tab.active .tab__label::after{transform:scaleX(1)}
.tab:disabled{color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);cursor:default}

/* ==========================================================================
   メインコンテンツ
   ========================================================================== */
.content{display:flex;flex-direction:column;gap:24px;max-width:880px;margin:0 auto;padding:24px 24px 48px}

/* 時計カード（primary container） */
.clock-card{position:relative;overflow:hidden;padding:24px 28px 28px;border-radius:var(--md-shape-xl);background:var(--md-primary-container);color:var(--md-on-primary-container);transition:background-color .3s var(--md-easing-standard),color .3s var(--md-easing-standard)}
.clock-card::after{content:"";position:absolute;right:-56px;top:-72px;width:240px;height:240px;border-radius:50%;background:var(--md-primary);opacity:.1;pointer-events:none}
.clock-card__date{font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:.01em;opacity:.85}
.clock-card__time{margin-top:4px;font-family:var(--md-font);font-size:clamp(3.5rem,11vw,5.25rem);line-height:1.1;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* 検索 */
.search-area{display:flex;flex-direction:column;gap:16px}
.search-area-title{font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--md-on-surface)}
.search-bar{display:flex;align-items:center;gap:4px;height:56px;padding:0 8px 0 16px;border-radius:var(--md-shape-full);background:var(--md-surface-container-high);color:var(--md-on-surface);transition:background-color .2s var(--md-easing-standard),box-shadow .2s var(--md-easing-standard)}
.search-bar:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,var(--md-surface-container-high))}
.search-bar:focus-within{background:var(--md-surface-container-highest);box-shadow:inset 0 0 0 2px var(--md-primary)}
.search-bar__icon{flex:none;color:var(--md-on-surface-variant)}
.search-bar__input{flex:1;min-width:0;height:100%;padding:0 8px;border:0;background:transparent;outline:none;font-size:1rem;letter-spacing:.02em;color:var(--md-on-surface)}
.search-bar__input::placeholder{color:var(--md-on-surface-variant)}
.search-bar__input:focus-visible{outline:none}
.btn-search{--_bg:var(--md-primary);display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--md-shape-full);color:var(--md-on-primary);cursor:pointer}
.btn-search:disabled{--_bg:color-mix(in srgb,var(--md-on-surface) 12%,transparent);color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);cursor:default}
.search-bar__input:disabled{color:color-mix(in srgb,var(--md-on-surface) 38%,transparent)}

/* フィルターチップ */
.dictionary-select{display:flex;flex-wrap:wrap;gap:8px}
.dict-pill{display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-sm);color:var(--md-on-surface-variant);font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap}
.dict-pill-icon{display:inline-block;width:0;height:18px;flex:none;background:currentColor;-webkit-mask:var(--icon-check) center/18px no-repeat;mask:var(--icon-check) center/18px no-repeat;transition:width .2s var(--md-easing-standard),margin .2s var(--md-easing-standard)}
.dict-pill.active{--_bg:var(--md-secondary-container);padding-left:8px;border-color:transparent;color:var(--md-on-secondary-container)}
.dict-pill.active .dict-pill-icon{width:18px;margin-right:8px}
.dict-pill.disabled,.dict-pill:disabled{border-color:color-mix(in srgb,var(--md-on-surface) 12%,transparent);color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);cursor:default}
.dict-pill.active:disabled{--_bg:color-mix(in srgb,var(--md-on-surface) 12%,transparent)}

/* 検索履歴（リスト） */
.search-history{padding:8px 0;border-radius:var(--md-shape-lg);background:var(--md-surface-container-low);transition:background-color .3s var(--md-easing-standard)}
.search-history-title{padding:12px 16px 4px;font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:.01em;color:var(--md-on-surface)}
.history-group{display:flex;flex-direction:column;margin-top:4px}
.history-group-label{padding:12px 16px 4px;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.01em;color:var(--md-primary)}
.history-list{display:flex;flex-direction:column}
.history-item{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;gap:16px;width:100%;min-height:56px;padding:8px 16px;border:0;border-radius:0;color:var(--md-on-surface);cursor:pointer;text-align:left}
.history-item::before,.history-item::after{content:"";width:24px;height:24px;background:var(--md-on-surface-variant);-webkit-mask:var(--icon-history) center/24px no-repeat;mask:var(--icon-history) center/24px no-repeat}
.history-item::after{grid-column:3;-webkit-mask-image:var(--icon-north-west);mask-image:var(--icon-north-west);-webkit-mask-size:20px;mask-size:20px}
.history-item-term{overflow:hidden;font-size:1rem;line-height:1.5rem;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}
.history-item-dict{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.history-empty{padding:8px 16px 16px;font-size:.875rem;line-height:1.25rem;color:var(--md-on-surface-variant)}

/* ==========================================================================
   スナックバー（インストール案内）
   ========================================================================== */
.install-banner{position:fixed;left:50%;bottom:24px;z-index:10000;width:min(calc(100vw - 32px),560px);transform:translateX(-50%);padding:6px 8px 6px 16px;border-radius:var(--md-shape-xs);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);box-shadow:var(--md-elevation-3);animation:snackbarIn .3s var(--md-easing-emphasized-decelerate) both}
.install-banner__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.install-banner__text{font-size:.875rem;line-height:1.25rem}
.install-banner__actions{display:flex;gap:4px;flex:none}
.install-banner__button,.install-banner__dismiss{height:40px;padding:0 12px;border:0;border-radius:var(--md-shape-full);color:var(--md-inverse-primary);font-size:.875rem;font-weight:500;letter-spacing:.01em;cursor:pointer}
.install-banner__dismiss{color:var(--md-inverse-on-surface)}

/* ==========================================================================
   設定画面
   ========================================================================== */
.settings-view{width:100%;min-height:100vh;background:var(--md-surface)}
.settings-panel{width:100%;min-height:100vh}
.settings-panel__header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:4px;height:64px;padding:0 16px 0 4px;background:var(--md-surface)}
.settings-panel__header .icon-button{margin-left:4px;color:var(--md-on-surface)}
.settings-panel__header h2{font-size:1.375rem;line-height:1.75rem;font-weight:400;color:var(--md-on-surface)}
.settings-layout{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - 64px)}

/* ナビゲーションドロワー（standard） */
.settings-sidebar{padding:4px 12px 24px}
.settings-sidebar__title{padding:18px 16px 18px;font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.01em;color:var(--md-on-surface-variant)}
.settings-nav{display:flex;flex-direction:column}
.settings-nav__item{display:flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 16px;border-radius:var(--md-shape-full);color:var(--md-on-surface-variant);font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.settings-nav__item svg{flex:none}
.settings-nav__item.active{--_bg:var(--md-secondary-container);color:var(--md-on-secondary-container)}

.settings-panel__body{width:100%;max-width:760px;padding:8px 24px 56px}
.settings-section{display:none;flex-direction:column;gap:2px}
.settings-section--active{display:flex;animation:fadeUp .3s var(--md-easing-emphasized-decelerate) both}
.settings-section h3{padding:14px 4px 16px;font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--md-on-surface)}

/* グループ化されたリスト項目：先頭と末尾だけ大きく丸める */
.settings-item{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:16px 20px;border-radius:var(--md-shape-xs);background:var(--md-surface-container)}
.settings-section h3 + .settings-item,.settings-section .about-header + .settings-item{border-top-left-radius:20px;border-top-right-radius:20px}
.settings-section > .settings-item:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.settings-item__title{font-size:1rem;line-height:1.5rem;letter-spacing:.01em;color:var(--md-on-surface)}
.settings-item__description{font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;color:var(--md-on-surface-variant)}

/* 塗りつぶしトーナルボタン */
.settings-action{--_bg:var(--md-secondary-container);flex:none;height:40px;padding:0 24px;border:0;border-radius:var(--md-shape-full);color:var(--md-on-secondary-container);font-size:.875rem;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap}
.settings-action:disabled{--_bg:color-mix(in srgb,var(--md-on-surface) 12%,transparent);color:color-mix(in srgb,var(--md-on-surface) 38%,transparent);cursor:default}

/* 外枠付きセレクト */
.select-field{position:relative;flex:none;min-width:240px}
.select-field::after{content:"";position:absolute;right:12px;top:50%;width:24px;height:24px;margin-top:-12px;background:var(--md-on-surface-variant);-webkit-mask:var(--icon-arrow-drop-down) center/24px no-repeat;mask:var(--icon-arrow-drop-down) center/24px no-repeat;pointer-events:none}
.settings-select{width:100%;height:56px;padding:0 44px 0 16px;border:1px solid var(--md-outline);border-radius:var(--md-shape-xs);background:transparent;color:var(--md-on-surface);font-size:1rem;-webkit-appearance:none;appearance:none;cursor:pointer}
.settings-select:hover{border-color:var(--md-on-surface)}
.settings-select:focus-visible{outline:none;border-color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary)}
.settings-select option,.settings-select optgroup{background:var(--md-surface-container-high);color:var(--md-on-surface)}

/* セグメントボタン */
.settings-mode{display:inline-flex;flex:none;border:1px solid var(--md-outline);border-radius:var(--md-shape-full);overflow:hidden}
.settings-mode label{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:40px;padding:0 16px;color:var(--md-on-surface);font-size:.875rem;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap}
.settings-mode label + label{border-left:1px solid var(--md-outline)}
.settings-mode label::before{content:"";display:inline-block;width:0;height:18px;flex:none;background:currentColor;-webkit-mask:var(--icon-check) center/18px no-repeat;mask:var(--icon-check) center/18px no-repeat;transition:width .2s var(--md-easing-standard),margin .2s var(--md-easing-standard)}
.settings-mode label:has(input:checked){--_bg:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.settings-mode label:has(input:checked)::before{width:18px;margin-right:8px}
.settings-mode label:has(input:focus-visible){outline:2px solid var(--md-primary);outline-offset:-3px}
.settings-mode input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

/* このアプリについて */
.about-header{display:flex;align-items:center;gap:20px;padding:8px 4px 24px}
.about-icon{width:72px;height:72px;border-radius:var(--md-shape-lg)}
.about-name{margin-bottom:4px;font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--md-on-surface)}
.about-description{font-size:.875rem;line-height:1.25rem;color:var(--md-on-surface-variant)}
.about-status{display:grid;grid-template-columns:auto minmax(0,1fr) auto;justify-content:stretch;gap:16px}
.about-status__mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* ==========================================================================
   ダイアログ（オフライン）
   ========================================================================== */
.offline-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--md-scrim) 32%,transparent);animation:fadeIn .2s linear both}
.offline-overlay__content{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;padding:24px;border-radius:var(--md-shape-xl);background:var(--md-surface-container-high);box-shadow:var(--md-elevation-3);text-align:center;animation:dialogIn .4s var(--md-easing-emphasized-decelerate) both}
.offline-overlay__icon{margin-bottom:16px;color:var(--md-primary)}
.offline-overlay__title{margin-bottom:16px;font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--md-on-surface)}
.offline-overlay__description{font-size:.875rem;line-height:1.25rem;letter-spacing:.02em;color:var(--md-on-surface-variant)}

/* ==========================================================================
   モーション
   ========================================================================== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes snackbarIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes dialogIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes softPop{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes dictListIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes viewExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}
@keyframes viewEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes settingsEnter{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes settingsLeave{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}

.clock-card{animation:fadeUp .5s var(--md-easing-emphasized-decelerate) both}
.search-area{animation:fadeUp .5s var(--md-easing-emphasized-decelerate) .05s both}
.search-history{animation:fadeUp .5s var(--md-easing-emphasized-decelerate) .1s both}
.dict-pill--selected{animation:softPop .3s var(--md-easing-standard) both}
.dictionary-select--enter{animation:dictListIn .25s var(--md-easing-emphasized-decelerate) both}
.view-exit{animation:viewExit .18s var(--md-easing-emphasized-accelerate) both}
.view-enter{animation:viewEnter .4s var(--md-easing-emphasized-decelerate) both}
.settings-view--enter{animation:settingsEnter .4s var(--md-easing-emphasized-decelerate) both}
.settings-view--leave{animation:settingsLeave .2s var(--md-easing-emphasized-accelerate) both}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:820px){
  .top-app-bar__row{padding:0 8px 0 16px}
  .tabs__list{padding:0}
  .content{gap:20px;padding:16px 16px 40px}
  .clock-card{padding:20px 24px 24px}
  .search-area-title{font-size:1.375rem;line-height:1.75rem}

  /* Android（Pixel）の設定アプリと同じ形。最初はカテゴリの一覧（大きな「設定」・検索・アイコンと名前と要約の 2 行）、押すと中身に。戻るで一覧へ（script.js の is-detail） */
  .settings-panel__header h2{display:none}
  .settings-layout{display:block}
  .settings-layout:not(.is-detail) .settings-panel__body{display:none}
  .settings-layout.is-detail .settings-sidebar{display:none}
  .settings-panel:has(.settings-layout.is-detail) .settings-me{display:none}
  .settings-sidebar{padding:0 0 32px}
  .settings-sidebar__title{display:none}
  .settings-listhead{padding:0 16px 8px}
  .settings-listhead__title{display:block;margin:16px 8px 28px;font-size:2.25rem;line-height:2.75rem;font-weight:400;color:var(--md-on-surface)}
  .settings-search{height:56px;border-radius:28px;padding:0 20px;gap:16px}
  .settings-nav{gap:0}
  .settings-nav__item{height:auto;min-height:72px;gap:24px;padding:12px 24px;border-radius:0;color:var(--md-on-surface);white-space:normal}
  .settings-nav__item.active{--_bg:transparent;color:var(--md-on-surface)}
  .settings-nav__item svg{color:var(--md-on-surface-variant)}
  .settings-nav__text span{font-size:1.25rem;line-height:1.75rem;font-weight:400;letter-spacing:0}
  .settings-nav__text small{display:block;font-size:.875rem;line-height:1.25rem;font-weight:400;letter-spacing:.01em;color:var(--md-on-surface-variant)}
  .settings-panel__body{max-width:none;padding:0 16px 40px}
  .settings-item{flex-direction:column;align-items:stretch;gap:12px}
  .select-field{min-width:0}
  .settings-mode{display:flex}
  .settings-mode label{flex:1;padding:0 8px}
  .about-status{grid-template-columns:auto minmax(0,1fr)}
  .about-status .settings-action{grid-column:1 / -1}
}

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

/* SK Hub Systems のアクセスチェック（右下の表示・同意カード）と重ならないよう、下のバナーを上げる */
@media (max-width:760px){body:has([data-RedCheckOSS-info-widget]) .install-banner{bottom:72px}body:has([data-RedCheckOSS-consent-card]) .install-banner{display:none}}

/* ==========================================================================
   SK Hub Systems アカウントとの連携（account.js）: 単語帳・検索履歴の同期
   ========================================================================== */
/* 検索欄の「単語帳に保存」（しおり） */
.save-word{color:var(--md-on-surface-variant)}
.save-word:disabled{opacity:.38;cursor:default}
.save-word .save-word__on{display:none}
.save-word[aria-pressed="true"]{color:var(--md-primary)}
.save-word[aria-pressed="true"] .save-word__on{display:block}
.save-word[aria-pressed="true"] .save-word__off{display:none}

/* 設定の「アカウント」 */
.malu-account{display:flex;flex-direction:column;gap:2px}
.malu-account > .settings-item:first-child{border-top-left-radius:20px;border-top-right-radius:20px}
.malu-account > .settings-item:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.malu-profile{justify-content:flex-start}
.malu-profile__text{flex:1;min-width:0}
.malu-profile__text p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.malu-avatar{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.malu-avatar--letter{display:grid;place-items:center;color:#fff;font-weight:500;font-size:1.125rem}
.malu-link-action{display:inline-flex;align-items:center}

/* スイッチ（Material 3） */
.malu-switch{position:relative;display:inline-flex;flex:none;cursor:pointer}
.malu-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.malu-switch__track{position:relative;width:52px;height:32px;border-radius:var(--md-shape-full);background:var(--md-surface-container-highest);box-shadow:inset 0 0 0 2px var(--md-outline);transition:background-color .2s var(--md-easing-standard)}
.malu-switch__track::after{content:"";position:absolute;top:8px;left:8px;width:16px;height:16px;border-radius:50%;background:var(--md-outline);transition:transform .2s var(--md-easing-standard),width .2s,height .2s,top .2s,left .2s,background-color .2s}
.malu-switch input:checked + .malu-switch__track{background:var(--md-primary);box-shadow:none}
.malu-switch input:checked + .malu-switch__track::after{top:4px;left:4px;width:24px;height:24px;transform:translateX(20px);background:var(--md-on-primary)}
.malu-switch input:focus-visible + .malu-switch__track{outline:2px solid var(--md-primary);outline-offset:2px}
.malu-switch input:disabled + .malu-switch__track{opacity:.38}

/* 単語帳の画面 */
.wordbook-body{width:100%;max-width:760px;margin:0 auto;padding:8px 24px 56px}
.wordbook-lead{padding:4px 4px 20px;font-size:.875rem;line-height:1.25rem;color:var(--md-on-surface-variant)}
.wordbook-empty{padding:32px 20px;border-radius:20px;background:var(--md-surface-container);color:var(--md-on-surface-variant);text-align:center;font-size:.875rem}
.wordbook-prompt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:20px;background:var(--md-surface-container)}
.wordbook-prompt__title{font-size:1.125rem;line-height:1.5rem;color:var(--md-on-surface)}
.wordbook-prompt__text{font-size:.875rem;line-height:1.25rem;color:var(--md-on-surface-variant);margin-bottom:8px}
.wordbook-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wordbook-item{display:flex;align-items:center;gap:4px;padding-right:8px;border-radius:var(--md-shape-xs);background:var(--md-surface-container)}
.wordbook-item:first-child{border-top-left-radius:20px;border-top-right-radius:20px}
.wordbook-item:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.wordbook-item__main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 20px;border:0;background:transparent;color:var(--md-on-surface);text-align:left;cursor:pointer;border-radius:inherit}
.wordbook-item__main:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.wordbook-item__word{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.0625rem;line-height:1.5rem}
.wordbook-item__dict{font-size:.8125rem;color:var(--md-on-surface-variant)}
.wordbook-item__delete{color:var(--md-on-surface-variant)}

/* お知らせ（画面の下） */
.malu-toast{position:fixed;left:50%;bottom:24px;z-index:100;max-width:calc(100% - 32px);padding:14px 20px;border-radius:var(--md-shape-xs);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);font-size:.875rem;box-shadow:var(--md-elevation-3);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s var(--md-easing-standard),transform .2s var(--md-easing-standard)}
.malu-toast.is-shown{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){.wordbook-body{padding:8px 16px 48px}}
/* sk-hub.jp への引っ越しのお知らせ（設定の基本設定のいちばん上） */
.settings-item--news{margin-bottom:12px;border-radius:20px !important;background:var(--md-secondary-container)}
.settings-item--news .settings-action{display:inline-flex;align-items:center;text-decoration:none;--_bg:var(--md-surface-container)}
.settings-item--news + .settings-item{border-top-left-radius:20px;border-top-right-radius:20px}
/* 設定のカテゴリの要約・検索・アカウント（スマホの形は上の @media (max-width:820px)） */
.settings-nav__text{display:flex;flex-direction:column;min-width:0;text-align:left}
.settings-nav__item[hidden]{display:none}
.settings-search{display:flex;align-items:center;background:var(--md-surface-container-high);color:var(--md-on-surface-variant);cursor:text}
@media (min-width:821px){
  .settings-nav__text small{display:none}
  .settings-listhead{padding:4px 0 12px}
  .settings-listhead__title{display:none}
  .settings-search{gap:12px;height:48px;padding:0 16px;border-radius:24px}
}
.settings-search svg{flex:none}
.settings-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--md-on-surface);font:inherit;font-size:1rem}
.settings-search:focus-within{box-shadow:inset 0 0 0 2px var(--md-primary)}
.settings-search__none{margin:16px;font-size:.875rem;color:var(--md-on-surface-variant)}
.settings-me{margin-left:auto}