/* Screen look for every page, layered over styles.css (the old look is kept in the
   Desktop backup RobMarke_Web_v0.3.1_static_before_redesign_20261028).
   Sizes: title 26 / heading 20 / sub 17 / body 16 / note 14 / smallest 13.
   One calm blue for actions; green, amber and red only for state.
   Rules start with "body" so they outrank the same selector in styles.css. */

body{
  --c-ink:#1f2933;--c-sub:#4a5564;--c-faint:#6b7685;--c-line:#d8dde5;--c-bg:#f4f5f7;
  --c-blue:#1d5fb8;--c-blue-dark:#174b92;--c-blue-pale:#eaf1fb;
  --c-green:#1b7a45;--c-green-pale:#e6f4ec;--c-amber:#8a5a00;--c-amber-pale:#fdf3df;--c-red:#b3261e;--c-red-pale:#fdecea;
  background:var(--c-bg);color:var(--c-ink);font-size:16px;line-height:1.7;
}

/* frame: sidebar, top bar, notice */
body .sidebar{background:#1f2933;overflow-y:auto;padding-top:22px}
body .brand{padding-bottom:22px}
body .workspace-select{margin-bottom:18px}
body .nav-kicker{margin:14px 0 6px}
body .brand small{display:none}
body .workspace-caption{font-size:12px;letter-spacing:0}
body .brand-mark{background:var(--c-blue);box-shadow:none;border-radius:8px}
body .workspace-select{background:#2a3542;border-color:#3a4654;border-radius:8px}
body .workspace-select b{font-size:13px}
body .workspace-select small{font-size:13px;color:#b5bfcc}
body .workspace-symbol{background:var(--c-blue)}
body .nav-link{font-size:15px;color:#d5dbe3;border-radius:6px;min-height:40px;padding:8px 14px;margin-bottom:2px}
body .nav-link:hover{background:#2f3b49}
body .nav-link.active{background:var(--c-blue);box-shadow:none}
body .side-bottom{background:#2a3542;border-color:#3a4654;border-radius:8px}
body .side-bottom b{font-size:13px}
body .side-bottom small{font-size:13px;color:#b5bfcc}
body .topbar{height:64px;border-bottom-color:var(--c-line)}
body .breadcrumbs{font-size:14px;color:var(--c-faint)}
body .breadcrumbs b{color:var(--c-ink)}
body .pill-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;letter-spacing:0;white-space:nowrap;padding:6px 12px;color:var(--c-green);background:var(--c-green-pale);border-color:#c7e6d3}
body .environment-warning{font-size:15px;padding:10px 16px;border-radius:8px;color:#6b4a10;background:var(--c-amber-pale);border-color:#efd9a8}
body .environment-warning .warn-long{display:none}

/* page head: no English overline, no sparkle, no side tag */
/* PC first: use the full width and keep vertical gaps short so less scrolling is needed */
body .content{max-width:none;padding:20px 36px 40px}
body .environment-warning{margin-bottom:18px}
body .page-head{margin-bottom:16px}
body .stats-grid{margin-bottom:24px}
body .stat-card{min-height:0;padding:16px 18px}
body .stat-icon{margin-bottom:8px}
body .feature-card{min-height:0}
body .recent-heading{margin-top:24px}
@media (min-width:1101px){
  body .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  body .feature-status{position:static;display:inline-block;margin-bottom:8px}
}
@media (min-width:1200px){
  body .case-editor-grid,body #case-step-review .case-two{grid-template-columns:minmax(280px,1fr) minmax(0,2.6fr)}
}
body .eyebrow,body .heading-spark,body .mode-tag,body .case-legend{display:none}
body .page-head h1{font-size:26px;letter-spacing:0;font-weight:700;margin:4px 0 6px}
body .page-head p{font-size:16px;color:var(--c-sub)}
body .toolbar{border-radius:8px;border-color:var(--c-line);padding:10px 12px;margin-bottom:16px}
body .selector-group{background:#fff;border-color:var(--c-line);border-radius:6px}
body .selector-group label{font-size:14px;color:var(--c-sub)}
body .selector-group select{font-size:16px;color:var(--c-ink);min-width:200px}

/* steps: one row, numbered, the current one filled */
body .case-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
body .case-step-btn{flex-direction:row;align-items:center;gap:10px;border-radius:8px;border-color:var(--c-line);padding:12px 14px;flex-wrap:wrap}
body .case-step-btn span{width:28px;height:28px;font-size:15px;background:#e9edf2;color:var(--c-sub)}
body .case-step-btn b{font-size:16px}
body .case-step-btn small{font-size:13px;color:var(--c-faint);width:100%;padding-left:38px;margin-top:-6px}
body .case-step-btn:hover{border-color:var(--c-blue)}
body .case-step-btn.active{border-color:var(--c-blue);background:var(--c-blue-pale);box-shadow:none}
body .case-step-btn.active span{background:var(--c-blue);color:#fff}

/* "what can this step do" lives behind a question mark */
.case-help{margin-bottom:16px}
.case-help summary{cursor:pointer;color:var(--c-blue,#1d5fb8);font-size:15px;width:max-content}
.case-help .case-boundary{margin:10px 0 0}
body .case-boundary>div{border-radius:8px;border-color:var(--c-line)}
body .case-boundary ul{font-size:14px;color:var(--c-sub)}

/* panels: flat, thin line, no step badge (the step bar already says it) */
body .panel{border-radius:8px;border-color:var(--c-line);box-shadow:none;padding:28px}
body .panel-number{display:none}
body .panel-header{margin-bottom:20px}
body .panel-header h2{font-size:20px;margin:0 0 6px}
body .panel-header p{font-size:16px;color:var(--c-sub);line-height:1.7}
body h3,body .case-two h3{font-size:17px;margin:8px 0 10px}

/* text sizes: nothing under 13px, notes in dark grey */
body .studio-label{font-size:15px;font-weight:600;color:var(--c-ink)}
body .studio-label input,body .studio-label select,body .studio-label textarea{font-size:16px;border-color:#c5ccd6;border-radius:6px;padding:10px 12px}
body #case-content{font-family:inherit;font-size:16px;line-height:1.8;border-color:#c5ccd6;border-radius:6px;padding:14px}
body input:focus,body select:focus,body textarea:focus{outline:2px solid var(--c-blue);outline-offset:1px}
body .studio-hint,body .case-status-line,body .case-refresh-row,body .check-row{font-size:15px;color:var(--c-sub)}
body .case-list,body .case-history{font-size:15px;color:var(--c-sub)}
body small,body .case-sub,body .case-card small,body .studio-draft small,body .case-history-row>span{font-size:14px;color:var(--c-faint)}
body .case-preview-lines{font-size:15px;color:var(--c-sub)}
body th{font-size:14px;color:var(--c-sub);background:#f7f8fa}
body td{font-size:15px;color:var(--c-ink)}
body .table-card{border-radius:8px;border-color:var(--c-line)}
body .studio-check,body .studio-caution{font-size:14px}
body .studio-check small{font-size:13px}
body .row-link{font-size:14px;color:var(--c-blue)}
body .check-detail li,body .check-detail b,body .check-evidence{font-size:15px}
body .studio-disclaimer{font-size:15px;border-radius:6px}

/* labels and chips: 13px minimum, flat colours */
body .bd,body .state-chip,body .check-chip,body .mini-tag{font-size:13px;border-radius:4px;padding:3px 8px}
body .state-chip{background:#eef1f5;color:var(--c-sub)}
body .bd-impl{background:var(--c-green-pale);color:var(--c-green)}
body .bd-sample{background:var(--c-amber-pale);color:var(--c-amber)}
body .bd-off{background:#eef1f5;color:var(--c-sub)}

/* where this product's posts go (the 予約する step) */
.case-accounts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 16px;margin-bottom:10px;border:1px solid var(--c-line);border-radius:8px;background:#f7f9fc;font-size:15px}
.case-accounts #case-accounts{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--c-sub)}
.case-accounts #case-accounts b{color:var(--c-ink)}

/* lists and cards */
body .case-card{border-radius:8px;border-color:var(--c-line);background:#fff;padding:14px 16px}
body .case-card-head b{font-size:16px}
body .studio-draft{border-radius:6px;border-color:var(--c-line);background:#fff;font-size:15px;color:var(--c-ink);padding:12px 14px}
body .studio-draft:hover{border-color:var(--c-blue)}
body .case-selected{border-color:var(--c-blue)!important;background:var(--c-blue-pale)!important}
body .case-reserve{border-radius:8px;border-color:var(--c-line);background:#fafbfc}

/* buttons: filled blue for the main action, white with a border for the rest */
body .primary-btn{background:var(--c-blue);border-radius:6px;font-size:16px;font-weight:600;padding:11px 20px;box-shadow:none;gap:8px}
body .primary-btn:hover{background:var(--c-blue-dark)}
body .secondary-btn{border:1px solid #b8c1cd;color:var(--c-ink);border-radius:6px;font-size:15px;font-weight:600;padding:10px 16px}
body .secondary-btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
body .text-btn{font-size:15px;color:var(--c-blue)}
body .case-next .secondary-btn{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
body .case-next .secondary-btn:hover{background:var(--c-blue-dark)}
body a{color:var(--c-blue)}

/* the other screens: same flat cards, one icon colour, nothing under 13px */
body .brand-mark span,body .section-overline{display:none}
body .workspace-caption,body .nav-kicker{font-size:13px;letter-spacing:0;color:#9aa6b5}
body .avatar{font-size:13px;background:var(--c-blue-pale);color:var(--c-blue)}
body .section-head h2{font-size:20px}
body .subtle-label{font-size:14px;color:var(--c-sub)}
body :is(.stat-card,.feature-card,.next-callout,.connection,.update-drop){border-radius:8px;box-shadow:none;border-color:var(--c-line)}
body .toolbar-aside{font-size:13px;color:var(--c-faint)}
body :is(.stat-icon,.feature-icon)[class]{background:var(--c-blue-pale);color:var(--c-blue);border-radius:6px}
body .stat-name{font-size:15px;color:var(--c-sub)}
body .stat-foot{font-size:14px;color:var(--c-faint)}
body .stat-unit{font-size:15px}
body .feature-card strong{font-size:17px}
body .feature-card p{font-size:15px;color:var(--c-sub)}
body .feature-status{font-size:13px;border-radius:4px}
body .feature-status.working{color:var(--c-green);background:var(--c-green-pale)}
body .feature-status.demo{color:var(--c-amber);background:var(--c-amber-pale)}
body .form label{font-size:15px;color:var(--c-ink)}
body .form :is(input,textarea,select){font-size:16px;border-color:#c5ccd6;border-radius:6px}
body .required,body .studio-chip,body .update-ready{font-size:13px;border-radius:4px}
body :is(.form-note,.figure-foot span,.update-drop small){font-size:14px;color:var(--c-sub)}
body .timeline b{font-size:15px}
body .timeline small{font-size:14px;color:var(--c-faint)}
body .time-dot{font-size:13px}
body .studio-draft-list,body .url-history{font-size:15px;color:var(--c-sub)}
body .figure-panel p,body .figure-panel code{font-size:15px}
body .segmented button{font-size:14px}
body .next-callout b{font-size:16px}
body .next-callout p{font-size:15px;color:var(--c-sub)}
body td.empty-cell{font-size:15px}
body .kv,body .kv span,body .kv b{font-size:15px}
body .connection b{font-size:15px}
body .connection small,body .connection span,body .conn-icon{font-size:13px}
body :is(.update-info,.update-bundled,.detail-muted){font-size:15px;color:var(--c-sub)}

@media (max-width:900px){
  body .case-steps{grid-template-columns:1fr 1fr}
  body .case-step-btn small{padding-left:0;margin-top:0}
  body .case-help .case-boundary{grid-template-columns:1fr}
}

/* HP・海外SEO (2026-10-29) */
body .site-inline{display:inline-flex;flex-direction:row;align-items:center;gap:8px;margin:0}
body .site-inline input{width:180px}
body .site-pre{white-space:pre-wrap;word-break:break-all;max-height:320px;overflow:auto;background:var(--c-bg);border:1px solid var(--c-line);border-radius:8px;padding:12px;font-size:14px;color:var(--c-ink)}
body .site-langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 12px;margin:8px 0 12px}
body .site-task{display:flex;justify-content:space-between;align-items:center;gap:12px}
body .site-task select{width:auto}
body .site-up{color:var(--c-green,#1e7a46);font-weight:600}
body .site-down{color:var(--c-red,#b42318);font-weight:600}
body #view-site .panel{margin-bottom:20px}
/* LP・AI検索診断：対象商品と調べるURL */
body .lp-target{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
body .lp-target .lp-url-label{flex:1 1 320px;margin:0}
body .lp-target .lp-url-label input{display:block;box-sizing:border-box;width:100%}
body .lp-target .secondary-btn{white-space:nowrap}
body .lp-target #lp-url-msg{flex-basis:100%;margin:0}