/* app.css — テキスト比較ツール
   共通部分は rekimee.co.jp/text-mining/ の実CSS（ユーザー提供）をそのまま採用。
   「text-diff 専用」ブロック以降だけがこのツール固有の追加 */
:root{
  --ink:#111111; --paper:#FFFFFF;
  --violet:#5b3df5;
      --violet-lt:#9b8cff;   /* 暗い背景に置く紫 */ --magenta:#ff2e88; --yellow:#ffe01b;
  --lime:#b8ff3c; --gray:#9E9EA6; --line:#E4E4E8;
  --skew:-18deg; --pad:20px;
  color-scheme: only light;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
/* 斜め（skew）部品の変形分が画面外へはみ出して横に揺れるのを根元で禁止する。
   clip はスクロールコンテナを作らないため、stickyヘッダーはそのまま効く */
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  font-family:'Zen Kaku Gothic New',sans-serif;
  background:var(--paper) !important; color:var(--ink);
  line-height:1.8; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.en{font-family:'Archivo Black',sans-serif;letter-spacing:.02em}
a{color:var(--ink)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}

/* chips */
.chip{display:inline-block;width:.8em;height:.8em;transform:skewX(var(--skew));vertical-align:baseline}
.c-violet{background:var(--violet)}.c-magenta{background:var(--magenta)}
.c-yellow{background:var(--yellow)}.c-lime{background:var(--lime)}.c-gray{background:var(--gray)}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:16px;padding:14px 28px;
  transform:skewX(var(--skew));transition:background .15s}
.btn>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.btn--magenta{background:var(--magenta)}
.btn:disabled{background:var(--gray);cursor:not-allowed}
.ghost{display:inline-block;background:#fff;color:var(--ink);border:3px solid var(--ink);cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;padding:11px 22px;transition:background .15s}

/* ---------------------------------------------------------------- skip link
   キーボード操作の最初のTabで「本文へスキップ」が出る。
   ヘッダーのナビを毎回タブ移動せずに本文へ入れるようにするため。 */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 20px;font-weight:900;z-index:2000;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* header */
header.site{border-bottom:3px solid var(--ink);background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .logo{font-size:18px;font-weight:900;text-decoration:none;display:flex;align-items:center;gap:8px}
.nav-links{display:flex;gap:22px;list-style:none}
.nav-links a{text-decoration:none;font-weight:700;font-size:14px}
.nav-links a[aria-current="page"]{border-bottom:3px solid var(--magenta)}
.menu-toggle{display:none;background:none;border:3px solid var(--ink);width:44px;height:44px;cursor:pointer;font-size:18px;color:var(--ink)}
#mobile-menu{display:block;position:fixed;inset:64px 0 0 0;background:#fff;z-index:49;padding:28px var(--pad)}
#mobile-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-weight:900;font-size:20px}

/* hero */
.hero{padding:64px 0 44px;border-bottom:3px solid var(--ink)}
.hero .kicker{font-size:13px;font-weight:900;letter-spacing:.14em;margin-bottom:14px}
.hero h1{font-size:clamp(30px,5.4vw,52px);font-weight:900;line-height:1.25;letter-spacing:.01em}
.hero h1 .en{font-size:.92em}
.hero p.lead{margin-top:18px;max-width:640px;font-size:16px;font-weight:500}
.hero .badges{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.badge{border:3px solid var(--ink);padding:5px 12px;font-size:12.5px;font-weight:900;background:#fff}
.badge i{margin-right:6px}
.hero-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* tool */
.tool{padding:48px 0}
.tool-card{border:3px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--violet);padding:26px}
.tool-card h2{font-size:20px;font-weight:900;margin-bottom:14px}
.tool-card h2 .chip{margin-right:8px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tab-btn{background:#fff;border:3px solid var(--ink);cursor:pointer;font-family:inherit;
  font-weight:900;font-size:14px;padding:9px 20px;transform:skewX(var(--skew))}
.tab-btn>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.tab-btn.is-active{background:var(--ink);color:#fff}

/* panels */
.panel{border:3px solid var(--ink);background:#fff;padding:22px;margin-top:26px}
.panel h2{font-size:19px;font-weight:900;margin-bottom:14px}
.panel h2 .chip{margin-right:8px}
.ping{display:inline-block;width:12px;height:12px;transform:skewX(var(--skew));margin-right:8px}
.ping--busy{background:var(--yellow);animation:blink 1s steps(2) infinite}
.ping--done{background:var(--lime)}
@keyframes blink{50%{opacity:.25}}

/* sections */
.section{padding:56px 0;border-top:3px solid var(--ink)}
.section h2.sec-title{font-size:clamp(22px,3.6vw,30px);font-weight:900;margin-bottom:8px}
.sec-title .chip{margin-right:8px}
.sec-sub{font-size:14.5px;font-weight:500;color:#333;margin-bottom:26px;max-width:680px}

/* faq */
.faq details{border:3px solid var(--ink);margin-bottom:14px;background:#fff}
.faq summary{cursor:pointer;font-weight:900;font-size:15px;padding:16px 18px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'＋';position:absolute;right:18px;top:14px;font-weight:900}
.faq details[open] summary::after{content:'－'}
.faq .a{padding:0 18px 16px;font-size:14px;font-weight:500;border-top:1px solid var(--line);padding-top:12px}

/* cta */
.cta-box{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--magenta);padding:28px;text-align:center}
.cta-box h2{font-size:clamp(20px,3.4vw,26px);font-weight:900;margin-bottom:10px}
.cta-box p{font-size:14.5px;font-weight:500;margin-bottom:18px}

/* footer */
footer.site{border-top:3px solid var(--ink);margin-top:56px;padding:34px 0;background:#fff}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap;list-style:none}
.foot-links a{text-decoration:none;font-size:13px;font-weight:700}
.copyright{font-size:12px;color:#555;font-weight:500}

/* 記事・規約ページ共通 */
.prose{max-width:760px;padding:44px 0 20px}
.prose h1{font-size:clamp(24px,4.4vw,34px);font-weight:900;line-height:1.35;margin-bottom:10px}
.prose .updated{font-size:12.5px;font-weight:700;color:#555;margin-bottom:26px}
.prose h2{font-size:20px;font-weight:900;margin:36px 0 12px;padding-left:12px;border-left:6px solid var(--violet)}
.prose h3{font-size:16px;font-weight:900;margin:24px 0 8px}
.prose p{font-size:15px;font-weight:500;margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:1.4em}
.prose li{font-size:15px;font-weight:500;margin-bottom:6px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.prose th{background:var(--ink);color:#fff;text-align:left;padding:8px 12px;font-size:13px}
.prose td{border:1px solid var(--line);padding:8px 12px;font-weight:500;vertical-align:top}
.prose .box{border:3px solid var(--ink);padding:14px 16px;margin-bottom:16px}
.prose .box.warn{box-shadow:5px 5px 0 var(--yellow)}
.prose code{background:#F1F1F4;border:1px solid var(--line);padding:0 5px;font-size:13px}
.table-scroll{overflow-x:auto}

/* =====================================================
   text-diff 専用（上の共通デザインと同じ語彙で組む）
   ===================================================== */
:root{
  --diff-add-bg:#EFF7DC; --diff-add-strong:#C6E69B;
  --diff-del-bg:#FCE7F2; --diff-del-strong:#F6BCDB;
  --diff-mod-bg:#FFF6D9; --diff-mod-strong:#FFE18A;
}

/* 入力2画面 */
.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.io-grid>*{min-width:0}
.io-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.io-tag{display:inline-block;background:var(--ink);color:#fff;font-weight:900;font-size:12px;
  padding:3px 12px;transform:skewX(var(--skew));white-space:nowrap}
.io-tag--after{background:var(--magenta)}
.io-label{flex:1;min-width:0;border:3px solid var(--ink);padding:8px 12px;
  font-family:inherit;font-size:13.5px;font-weight:700;background:#fff;color:var(--ink)}
.io-label::placeholder{color:var(--gray);font-weight:400}
.io-area{display:block;width:100%;min-height:260px;border:3px solid var(--ink);resize:vertical;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:13.5px;line-height:1.7;padding:14px 16px;background:#fff;color:var(--ink)}
.io-area:focus{outline:3px solid var(--violet);outline-offset:-3px}
.io-area.is-drag{outline:4px dashed var(--magenta);outline-offset:-4px}
.io-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.io-count{font-size:12.5px;font-weight:700;color:#444;margin-top:6px}

/* 小ボタン（結果ツールバー・持ち出しで共用） */
.mini-btn{background:#fff;border:3px solid var(--ink);cursor:pointer;font-family:inherit;
  font-weight:700;font-size:13px;padding:8px 14px;min-height:40px;color:var(--ink);transition:background .15s}
.mini-btn i{margin-right:2px}
.btn i,.ghost i,.tab-btn i{margin-right:2px}

/* 比較オプション */
details.adv{border:3px solid var(--ink);margin-top:16px;background:#fff}
details.adv summary{cursor:pointer;font-weight:900;font-size:14px;padding:12px 16px;list-style:none;position:relative}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::after{content:'＋';position:absolute;right:16px;top:10px;font-weight:900}
details.adv[open] summary::after{content:'－'}
.adv-body{border-top:3px solid var(--ink);padding:16px;display:grid;gap:12px}
.adv-body label{font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.adv-body input[type="checkbox"],.adv-body input[type="radio"]{width:18px;height:18px;accent-color:var(--violet)}
.opt-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.opt-group-name{font-size:13px;font-weight:900}
.adv-body .mini-btn{justify-self:start}

/* 実行列と案内 */
.run-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.run-note{margin-top:12px;font-size:13px;font-weight:700}
.run-note.is-error{color:var(--magenta)}
.safe-note{margin-top:12px;font-size:13px;font-weight:700}
.safe-note .chip{margin-right:8px}
.restore-note{margin-bottom:12px;font-size:12.5px;font-weight:700;color:#444}

/* 結果パネル */
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.panel-title{font-size:19px;font-weight:900}
.panel-title .chip{margin-right:8px}
.result-stats{display:flex;gap:8px;flex-wrap:wrap;list-style:none}
.result-stats li{border:3px solid var(--ink);padding:4px 12px;font-size:13px;font-weight:900;background:#fff}
.stat-add{background:var(--diff-add-strong)}
.stat-del{background:var(--diff-del-strong)}
.stat-mod{background:var(--diff-mod-strong)}
.stat-same{background:var(--line)}
.result-toolbar{margin-top:14px;border:3px solid var(--ink);border-bottom:0;background:#F7F7F9;
  padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;font-weight:700}
.toolbar-sep{width:3px;height:22px;background:var(--line)}
.opt-inline{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;min-height:40px;cursor:pointer}
.opt-inline input{width:18px;height:18px;accent-color:var(--violet)}
#jump-pos{font-size:12.5px;font-weight:700;color:#444;margin-top:0}
.result-body{border:3px solid var(--ink);background:#fff;overflow:auto;max-height:68vh}

/* 差分の表 */
.diff-table{width:100%;border-collapse:collapse;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:13.5px;line-height:1.7}
.diff-table td{vertical-align:top;padding:1px 10px}
.diff-table .ln{width:1%;min-width:46px;text-align:right;color:#888;background:#F7F7F9;
  border-right:1px solid var(--line);font-size:12px;white-space:nowrap;padding:1px 8px;
  user-select:none;-webkit-user-select:none}
.diff-table .tx{white-space:pre-wrap;word-break:break-all;width:50%}
.diff-table .sym{width:1%;padding:1px 6px;font-weight:900;user-select:none;-webkit-user-select:none}
.row-add .tx--b,.row-add .sym{background:var(--diff-add-bg)}
.row-del .tx--a,.row-del .sym{background:var(--diff-del-bg)}
.row-mod .tx--a,.row-mod .tx--b,.row-mod .sym{background:var(--diff-mod-bg)}
.row-uni.row-add td:last-child{background:var(--diff-add-bg)}
.row-uni.row-del td:last-child{background:var(--diff-del-bg)}
mark.d-add{background:var(--diff-add-strong);color:inherit}
mark.d-del{background:var(--diff-del-strong);color:inherit}
mark.d-mod-a{background:var(--diff-del-strong);color:inherit}
mark.d-mod-b{background:var(--diff-add-strong);color:inherit}
.row-focus td{outline:3px solid var(--violet);outline-offset:-3px}
.gap-row td{background:#F7F7F9;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gap-btn{display:block;width:100%;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:#444;padding:7px 10px;text-align:center}

/* 持ち出し */
.takeout{margin-top:22px}
.takeout-head{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.takeout-title{font-size:19px;font-weight:900;margin-right:6px}
.takeout-preview{background:var(--ink);color:var(--lime);font-family:Consolas,Menlo,monospace;
  font-size:13px;line-height:1.7;padding:16px;overflow:auto;max-height:340px;
  white-space:pre-wrap;word-break:break-all}
.takeout-preview:focus{outline:3px solid var(--violet)}
.takeout-note{margin-top:8px;font-size:12.5px;font-weight:700;color:#444}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* HOW TO */
.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.howto-card{border:3px solid var(--ink);padding:18px;background:#fff}
.howto-num{display:inline-block;background:var(--magenta);color:#fff;font-weight:900;font-size:14px;
  padding:2px 14px;transform:skewX(var(--skew));margin-bottom:10px}
.howto-num>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.howto-card h3{font-size:16px;font-weight:900;margin-bottom:8px}
.howto-card p{font-size:13.5px;font-weight:500}


/* ツアー */
#tour-popover{position:fixed;z-index:99;background:#fff;border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--violet);width:min(400px,calc(100vw - 24px));padding:16px}
.tour-step{display:inline-block;font-family:'Archivo Black',sans-serif;font-size:12px;letter-spacing:.08em;
  background:var(--yellow);border:3px solid var(--ink);padding:2px 8px}
.tour-text{font-size:14px;font-weight:500;line-height:1.75;margin-top:10px}
.tour-btns{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.tour-spot{outline:4px solid var(--yellow);outline-offset:4px;position:relative;z-index:98;background:#fff}
@media (max-width:640px){
  #tour-popover{left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    width:100% !important;max-width:100% !important;border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -6px 0 var(--yellow);padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* responsive */
@media (max-width:820px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .io-grid{grid-template-columns:1fr}
  .howto-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero{padding:44px 0 34px}
  .tool{padding:36px 0 40px}
  .tool-card{padding:18px 14px}
  .panel{padding:16px 14px}
  .section{padding:44px 0}
  .adv-body{padding:14px 12px}
  .result-toolbar{padding:10px}
  .run-row,.tabs,.btn-row{flex-wrap:wrap}
  .diff-table .tx{word-break:break-all}
}
/* iOSは16px未満の入力欄にフォーカスすると自動で拡大するため、タッチ端末では16pxにする */
@media (pointer:coarse), (max-width:820px){
  .io-area,.io-label{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* print */
@media print{
  header.site,.hero-cta,.hero .badges,details.adv,.run-row,.result-toolbar,.takeout,
  footer.site,#tour-popover,.io-tools{display:none !important}
  .result-body{max-height:none;overflow:visible;border:1px solid #000}
  .tool-card{box-shadow:none}
}


/* ==========================================================================
   ホバー効果（マウス等の正確なポインタを持つ環境だけに適用）
   タッチ端末ではタップ後にホバー状態が残るため、全ツール共通で
   @media (hover:hover) and (pointer:fine) の中に閉じ込めています。
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .btn--magenta:hover{background:var(--violet)}
  .ghost:hover{background:var(--lime)}
  .nav-links a:hover{color:var(--magenta)}
  .tab-btn:hover{background:var(--yellow);color:var(--ink)}
  .tab-btn.is-active:hover{background:var(--ink);color:#fff}
  .foot-links a:hover{color:var(--magenta)}
  .mini-btn:hover{background:var(--lime)}
  .gap-btn:hover{background:var(--yellow);color:var(--ink)}
}


/* ===========================================================================
   オープンβ表示（ロゴの隣の小さなバッジ）
   ベータを終えるときは、このブロックと各ヘッダーの
   <span class="rk-beta">オープンβ版</span> を消せば全て外れる。
   （grep -rn 'rk-beta' で全箇所が出ます）
   =========================================================================== */
.rk-beta{
  display:inline-block;
  font-family:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-style:normal; font-weight:700; font-size:10px; line-height:1.7;
  letter-spacing:.04em; text-transform:none; text-decoration:none;
  background:#ffe01b; color:#111; border:2px solid #111;
  padding:0 5px; margin-left:6px;
  white-space:nowrap; vertical-align:middle;
}
@media (max-width:420px){
  .rk-beta{ font-size:9px; padding:0 4px; margin-left:4px; }
}