:root{
    --bg:#ececeb; --panel:#ffffff; --ink:#1c1c1e; --muted:#6b6b70;
    --line:#e2e2e0; --line2:#d2d2cf; --accent:#3f51b5; --radius:12px;
    --mono:"SF Mono",ui-monospace,"Cascadia Code","Roboto Mono",Consolas,Menlo,monospace;
    --sans:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}

  /* site header */
  .site-header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
  .header-inner{max-width:1200px;margin:0 auto;padding:4px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .logo-mark{width:28px;height:28px;border-radius:8px;
    background:conic-gradient(from 0deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}
  .logo-text{font-size:16px;font-weight:700;letter-spacing:.02em}
  .logo-text em{font-style:normal;color:var(--accent)}
  .header-nav a{font-size:16px;color:#000;text-decoration:none;margin-left:16px}
  .header-nav a:hover{color:var(--accent)}

  .wrap{max-width:1200px;margin:0 auto;padding:28px 20px 64px}
  .page-head{margin-bottom:22px}
  .brand{font-size:13px;letter-spacing:.08em;color:var(--muted)}
  h1{font-size:24px;font-weight:600;margin:2px 0 4px}
  .lead{font-size:16px;color:#000;margin:0}
  h2{font-size:15px;font-weight:600;margin:0 0 12px}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}

  /* hero */
  .hero{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:18px}
  .preview{flex:0 0 200px;height:200px;border-radius:var(--radius);border:1px solid var(--line2);
    display:flex;align-items:flex-end;justify-content:flex-start;padding:14px;cursor:pointer;transition:background .12s}
  .preview .pv-hex{font-family:var(--mono);font-size:18px;font-weight:600;letter-spacing:.02em}
  .hero-ctrl{flex:1 1 320px;display:flex;flex-direction:column;gap:12px;justify-content:center}
  .ctrl-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  input[type=color]{width:54px;height:40px;border:1px solid var(--line2);border-radius:8px;padding:2px;background:var(--panel);cursor:pointer}
  .btn{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:8px;
    padding:9px 14px;font-size:13px;font-family:var(--sans);cursor:pointer;transition:border-color .12s,background .12s}
  .btn:hover{border-color:var(--accent)}
  a.btn{display:inline-block;text-decoration:none}
  .btn-accent{border-color:var(--accent);color:var(--accent);font-weight:600}
  .btn-accent:hover{background:#f3f4fb}
  .btn:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .hint{font-size:16px;color:#000;}

  /* format grid */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
  .fmt{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
  .fmt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .fmt-head .name{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
  .copy{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:6px}
  .copy:hover{color:var(--accent);background:#f3f4fb}
  .copy.done{color:#1b9e75}
  .fields{display:flex;gap:6px}
  .field{flex:1;display:flex;flex-direction:column;gap:3px}
  .field label{font-size:10px;color:var(--muted);font-family:var(--mono);letter-spacing:.05em}
  .field input{width:100%;border:1px solid var(--line2);border-radius:7px;padding:8px 4px;font-family:var(--mono);
    font-size:14px;text-align:center;color:var(--ink);background:var(--panel);-moz-appearance:textfield}
  .field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .field.hex input{text-align:left}

  /* palettes */
  .schemes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 18px}
  .scheme h2{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}
  .scheme h2 span{font-size:14px;font-weight:400;color:#000;}
  .swatches{display:flex;gap:8px;flex-wrap:wrap}
  .sw{display:flex;flex-direction:column;width:60px}
  .chip{height:48px;border-radius:8px;border:1px solid var(--line2);cursor:pointer;transition:transform .1s}
  .chip:hover{transform:translateY(-2px)}
  .chip-hex{font-family:var(--mono);font-size:10px;text-align:center;padding:4px 0 0;color:var(--muted);
    cursor:pointer;border:none;background:transparent;width:100%}
  .chip-hex:hover{color:var(--accent)}

  /* named colors gallery */
  .named-section{margin-top:18px}
  .section-title{font-size:18px;font-weight:600;margin:0 0 2px}
  .section-lead{font-size:16px;color:#000;;margin:0 0 6px}
  .family{margin-top:18px}
  .family-label{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px}
  .ncolors{display:flex;gap:10px;flex-wrap:wrap}
  .ncolor{width:96px;text-decoration:none;color:var(--ink)}
  .nchip{display:block;height:56px;border-radius:9px;border:1px solid var(--line2);transition:transform .1s}
  .ncolor:hover .nchip{transform:translateY(-2px)}
  .nname{display:block;font-size:12px;font-weight:600;text-align:center;padding-top:5px;line-height:1.2;overflow-wrap:anywhere}
  .nhex{display:block;font-family:var(--mono);font-size:10px;text-align:center;color:var(--muted)}
  .ncolor:hover .nhex{color:var(--accent)}

  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;opacity:0;
    pointer-events:none;transition:opacity .2s,transform .2s}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .note{font-size:16px;color:#000;margin-top:22px;line-height:1.7}
  /* 横長広告スロット（AdSense / アフィリエイトバナー等を中に貼る） */
  .site-header .ad-banner{margin:0}      /* 下マージン22pxを消す */
  .site-header img{display:block;max-height:60px;width:auto}
  .header-right{display:flex;align-items:center;gap:16px}
  @media(max-width:760px){.ad-banner{display:none}}   /* スマホでは非表示 */
  @media(max-width:900px){.schemes{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.preview{flex-basis:100%}.schemes{grid-template-columns:1fr}}

  /* XM横長バナー: ヘッダー内で幅を500pxに抑える */
  .site-header .ad-banner img{width:100%;max-width:500px;height:auto}
  /* 下部の四角バナー（PC・スマホ共通で表示） */
  .ad-square{display:flex;justify-content:center;margin:32px 0 8px}
  .ad-square img{display:block;width:300px;height:auto;max-width:100%}

/* =====================================================================
   言語スイッチャー用スタイル(webcolor.pro と同一)。
   color.amoremers.jp の共通CSS(または各ページCSS)の末尾に追記する。
   ===================================================================== */
.language-switcher{position:relative;margin-left:16px}
.language-switcher-button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 11px;
  font-size:14px;font-family:var(--sans);cursor:pointer;transition:border-color .12s,background .12s;line-height:1}
.language-switcher-button:hover{border-color:var(--accent)}
.language-switcher-button .language-switcher-icon{width:16px;height:16px;flex:0 0 auto;color:#000;}
.language-switcher-button .language-switcher-current{font-weight:600;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.language-switcher-button .language-switcher-caret{width:10px;height:10px;flex:0 0 auto;color:#000;transition:transform .18s}
.language-switcher[data-open="true"] .language-switcher-button{border-color:var(--accent)}
.language-switcher[data-open="true"] .language-switcher-caret{transform:rotate(180deg)}
.language-switcher-panel{position:fixed;top:70px;left:50%;z-index:50;width:min(800px,92vw);
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.06);padding:10px;
  max-height:calc(100vh - 90px);overflow-y:auto;
  opacity:0;transform:translateX(-50%) translateY(-6px) scale(.985);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;transform-origin:top center}
.language-switcher[data-open="true"] .language-switcher-panel{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}
.language-switcher-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.language-switcher-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  text-decoration:none;color:#000;font-size:16px;line-height:1.25;transition:background .1s;min-width:0}
.language-switcher-item:hover{background:#f3f4fb}
.language-switcher-item .language-switcher-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.language-switcher-item[aria-current="true"]{background:#eef0fb;color:var(--accent);font-weight:600}
.language-switcher-item .language-switcher-check{margin-left:auto;width:14px;height:14px;flex:0 0 auto;opacity:0}
.language-switcher-item[aria-current="true"] .language-switcher-check{opacity:1}
.language-switcher-group{margin-bottom:10px}
.language-switcher-group:last-child{margin-bottom:0}
.language-switcher-group-label{font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);padding:6px 10px 4px}
.language-switcher-close{position:absolute;top:8px;right:8px;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border:none;background:transparent;
  color:var(--ink);cursor:pointer;border-radius:8px;padding:0}
.language-switcher-close:hover{background:#f3f4fb;color:var(--accent)}
.language-switcher-close svg{width:24px;height:24px}
/* RTLでも数値・カラーコードは左から右で表示する */
.code .val,
.code .cin input,
.srow input,
.sw .hx,
.vsw .hx,
.preview b,
.pv-hex,
.field input,
.field.hex input{
  direction:ltr;
  unicode-bidi:plaintext;
}
@media(max-width:560px){.language-switcher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.language-switcher-panel{width:min(340px,92vw)}
}

/* キリル文字・ギリシャ文字が日本語フォントの全角グリフで間延びしないよう、
   スイッチャーのパネル内は欧文フォントを優先する(日本語は後段のフォールバックで表示) */
.language-switcher-panel{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}