/* PDF作業台 — shared styles for content pages and the landing sections of the tool page */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --fg:#16202B; --fg2:#3D4856; --muted:#5B6675; --line:#DDE1E7;
  --accent:#2F5BEA; --accent-ink:#FFFFFF; --accent-soft:#E6ECFD; --link:#2550D6;
  --warm:#B36B00; --warm-soft:#FFF6E3; --warm-line:#F3DEAE; --ok:#1C8A5A; --bad:#A3261B; --bad-soft:#FDECEA;
  --foot:#16202B; --foot-fg:#C9D1DC;
  --display:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161D; --surface:#1A212B; --fg:#E6EAF0; --fg2:#C3CBD6; --muted:#98A3B3; --line:#2C3542;
  --accent:#6E8FFF; --accent-ink:#0B1020; --accent-soft:#1E2A4A; --link:#8FA9FF;
  --warm:#F0B456; --warm-soft:#2E2414; --warm-line:#4A3A1C; --ok:#4CC995; --bad:#FF8E7E; --bad-soft:#3A1F1C;
  --foot:#0B0F14; --foot-fg:#AEB8C6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161D; --surface:#1A212B; --fg:#E6EAF0; --fg2:#C3CBD6; --muted:#98A3B3; --line:#2C3542;
  --accent:#6E8FFF; --accent-ink:#0B1020; --accent-soft:#1E2A4A; --link:#8FA9FF;
  --warm:#F0B456; --warm-soft:#2E2414; --warm-line:#4A3A1C; --ok:#4CC995; --bad:#FF8E7E; --bad-soft:#3A1F1C;
  --foot:#0B0F14; --foot-fg:#AEB8C6; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);word-break:auto-phrase;line-break:strict}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.s-in{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* header (content pages) */
.s-head{background:var(--surface);border-bottom:1px solid var(--line)}
.s-head .s-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font-family:var(--display);font-size:21px;letter-spacing:.02em;white-space:nowrap}
.brand img{width:30px;height:30px;display:block}
.s-nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;margin-left:auto}
.s-nav a{color:var(--fg2);text-decoration:none}
.s-nav a:hover{color:var(--link);text-decoration:underline}
.s-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;padding:11px 20px;border-radius:10px;font-size:15px;min-height:44px}
.s-btn:hover{filter:brightness(1.07)}
.s-btn.ghost{background:var(--surface);color:var(--fg);border:1px solid var(--line)}

/* layout for articles */
.s-main{padding-block:28px 64px}
.s-cols{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.s-article{flex:999 1 600px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,4vw,44px)}
.s-aside{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:14px}
.s-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.s-box h2{font-size:15px;margin:0 0 8px}
.s-box ul{margin:0;padding-left:1.1em;font-size:14px;line-height:1.7}
.s-box p{font-size:14px;margin:0 0 12px;color:var(--fg2)}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
.tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--warm);background:var(--warm-soft);border-radius:999px;padding:2px 12px;letter-spacing:.06em}
.tag.basic{color:var(--link);background:var(--accent-soft)}

/* article typography */
.prose{font-size:16.5px;line-height:1.95;color:var(--fg)}
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,4vw,36px);line-height:1.4;margin:12px 0 8px;text-wrap:balance}
.prose .meta{font-size:13px;color:var(--muted);margin:0 0 24px}
.prose h2{font-size:23px;line-height:1.5;margin:44px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--fg);text-wrap:balance}
.prose h3{font-size:18.5px;margin:30px 0 8px;text-wrap:balance}
.prose p{margin:0 0 16px}
/* body text: fill each line (Japanese book style) instead of breaking at phrases, which leaves ragged gaps */
.prose p,.prose li,.prose td,.prose th,.note-box,.tip-box,.s-box p{word-break:normal;overflow-wrap:anywhere;text-align:start;text-wrap:pretty}
.prose h1,.prose h2,.prose h3,.prose .crumbs,.prose .meta{text-align:left}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em}
.prose li{margin:4px 0}
.prose .lead{font-size:17.5px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;margin:0 0 18px}
.prose th,.prose td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--bg)}
.tbl{overflow-x:auto;margin:0 0 18px}
.tbl table{margin:0;min-width:460px}
.note-box{background:var(--warm-soft);border:1px solid var(--warm-line);border-radius:12px;padding:14px 18px;margin:0 0 20px;font-size:15.5px}
.note-box strong{display:block;margin-bottom:2px}
.tip-box{background:var(--accent-soft);border-radius:12px;padding:14px 18px;margin:0 0 20px;font-size:15.5px}
.steps{list-style:none;padding:0;margin:0 0 20px;counter-reset:st;display:flex;flex-direction:column;gap:18px}
.steps>li{counter-increment:st;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 16px;margin:0}
.steps>li::before{content:counter(st);grid-row:1 / span 3;width:36px;height:36px;border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px}
.steps h3{margin:4px 0 2px;font-size:18px}
.steps p{margin:0}
.kbd{font-family:var(--mono);font-size:.9em;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 6px}
.cta-end{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* ad slots: empty until AdSense is approved */
.ad-slot{margin:24px 0;min-height:0}
.ad-slot:empty{display:none}

/* cards (guide lists) */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.g-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.g-card:hover{border-color:var(--accent)}
.g-card b{font-size:17px;line-height:1.5;text-wrap:pretty}
.g-card span.d{font-size:14px;color:var(--muted);text-wrap:pretty}

/* landing sections on the tool page */
.lp{font-size:16px;line-height:1.8;padding-block:24px 8px}
.lp section{padding-block:40px}
.lp h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3.4vw,30px);margin:0 0 6px;line-height:1.4}
.lp .sub{margin:0 0 22px;color:var(--fg2);max-width:46em}
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px}
.f-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.f-card svg{width:32px;height:32px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-card b{font-size:17px}
.f-card span{font-size:14px;color:var(--muted);text-wrap:pretty}
.cmp{display:flex;flex-wrap:wrap;gap:14px}
.cmp>div{flex:1 1 380px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:12px}
.cmp>div.us{border:2px solid var(--accent)}
.cmp .lbl{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.cmp .us .lbl{color:var(--link)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.flow span{background:var(--bg);border-radius:8px;padding:8px 12px}
.flow span.srv{background:var(--bad-soft);color:var(--bad);font-weight:700}
.flow span.loc{background:var(--accent-soft);font-weight:700}
.flow i{font-style:normal;color:var(--muted)}
.cmp p{margin:0;font-size:14px;color:var(--fg2)}
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{margin:8px 0 0;color:var(--fg2);font-size:15px}
.more{margin-top:16px;font-size:15px;font-weight:700}

/* footer */
.s-foot{background:var(--foot);color:var(--foot-fg);margin-top:24px}
.s-foot .s-in{display:flex;flex-wrap:wrap;gap:18px 40px;padding-block:32px calc(32px + env(safe-area-inset-bottom,0px));font-size:13px}
.s-foot .fb{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.s-foot .fb b{font-family:var(--display);font-weight:400;font-size:20px;color:#FFFFFF}
.s-foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-start}
.s-foot a{color:var(--foot-fg)}
.s-foot small{flex-basis:100%;color:var(--foot-fg);opacity:.8}

@media (max-width:640px){.s-nav{margin-left:0;order:3;width:100%}.s-head .s-btn{margin-left:auto;padding:9px 14px;font-size:14px}}
@media (max-width:640px){.steps>li{grid-template-columns:28px minmax(0,1fr);gap:4px 12px}.steps>li::before{width:28px;height:28px;font-size:13px}.s-article{border-radius:12px}}