/* ============================================================
   Youtubeショート動画収益スクール
   紙のワークブックの手ざわり／縦9:16を意匠の芯にする
   ============================================================ */
:root{
  --paper:#FAF7F1; --paper2:#F3EEE4; --raise:#FFFFFF;
  --rule:#E2DACB; --rule2:#CFC4AF;
  --ink:#17181C; --ink2:#6B6558; --ink3:#948C7C;
  --go:#DE3A11; --go-d:#B22C08; --go-w:#FDEDE7;
  --set:#12595F; --set-d:#0C4046; --set-w:#E6F1F1;
  --gold:#A8781E;
  --shadow:0 1px 2px rgba(30,22,10,.05), 0 8px 24px -12px rgba(30,22,10,.18);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px; line-height:1.85; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace}
a{color:inherit}

/* ── 台紙 ─────────────────────────────── */
.wrap{max-width:880px; margin:0 auto; padding:0 22px}

/* ── ヘッダ ───────────────────────────── */
header{border-bottom:1px solid var(--rule); background:var(--paper)}
.hd{display:flex; align-items:center; gap:14px; padding:20px 0}
.mark{
  width:26px; height:46px; border-radius:5px; flex:none;
  background:linear-gradient(160deg,var(--go) 0%,var(--go-d) 60%,var(--set) 100%);
  box-shadow:var(--shadow);
}
.hd h1{font-size:17px; font-weight:900; letter-spacing:.02em; line-height:1.35}
.hd .sub{font-size:11.5px; color:var(--ink3); font-weight:500; letter-spacing:.14em}
.hd nav{margin-left:auto; display:flex; gap:20px; font-size:13.5px; font-weight:700}
.hd nav a{color:var(--ink2); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent}
.hd nav a:hover{color:var(--ink); border-bottom-color:var(--rule2)}
.hd nav a[aria-current]{color:var(--ink); border-bottom-color:var(--go)}

/* ── 見出し ───────────────────────────── */
.lead{padding:52px 0 40px}
.lead .eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--gold);
  margin-bottom:14px;
}
.lead h2{font-size:clamp(26px,4.6vw,38px); font-weight:900; line-height:1.42; letter-spacing:.005em;
         text-wrap:balance; margin-bottom:16px}
.lead p{font-size:15.5px; color:var(--ink2); max-width:60ch; line-height:1.95}
.lead p b{color:var(--ink); font-weight:700}

/* ── 9:16 の札（この教材の意匠）───────── */
.chip{
  width:54px; height:96px; border-radius:9px; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.chip::after{content:""; position:absolute; inset:5px; border:1.5px solid rgba(255,255,255,.28); border-radius:5px}
.chip .n{font-size:30px; font-weight:900; line-height:1; font-family:"Roboto Mono",monospace}
.chip .t{font-size:9px; font-weight:700; letter-spacing:.16em; margin-top:5px; opacity:.85}
.chip.a{background:linear-gradient(165deg,#17727A,var(--set-d))}
.chip.b{background:linear-gradient(165deg,#EE5326,var(--go-d))}

/* ── 入口カード ───────────────────────── */
.cards{display:flex; flex-direction:column; gap:16px; padding-bottom:20px}
.card{
  display:flex; gap:22px; align-items:center; text-decoration:none;
  background:var(--raise); border:1px solid var(--rule); border-radius:var(--r);
  padding:22px 24px; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-2px); border-color:var(--rule2);
  box-shadow:0 2px 4px rgba(30,22,10,.06),0 18px 40px -18px rgba(30,22,10,.3)}
.card .body{flex:1; min-width:0}
.card h3{font-size:20px; font-weight:900; line-height:1.4; margin-bottom:6px}
.card p{font-size:14px; color:var(--ink2); line-height:1.8}
.card .meta{margin-top:10px; display:flex; flex-wrap:wrap; gap:7px}
.tag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
     background:var(--paper2); color:var(--ink2); border:1px solid var(--rule)}
.card .arrow{font-size:20px; color:var(--ink3); flex:none}
.card:hover .arrow{color:var(--go)}

/* ── 本文の節 ─────────────────────────── */
section{padding:14px 0 44px}
.sec-h{display:flex; align-items:baseline; gap:12px; margin:34px 0 16px;
       padding-bottom:9px; border-bottom:2px solid var(--ink)}
.sec-h .no{font-family:"Roboto Mono",monospace; font-size:13px; font-weight:700; color:var(--go)}
.sec-h h3{font-size:19px; font-weight:900; letter-spacing:.01em}
h4{font-size:15.5px; font-weight:800; margin:24px 0 8px}
p+p{margin-top:10px}
section p{font-size:15px; color:#33343A; line-height:1.95}
section p b, li b{font-weight:700; color:var(--ink)}
ul,ol{margin:10px 0 10px 1.25em}
li{font-size:15px; margin:5px 0; line-height:1.9; color:#33343A}

/* ── 手順 ─────────────────────────────── */
.steps{counter-reset:s; margin:18px 0}
.step{display:grid; grid-template-columns:34px 1fr; gap:0 16px; padding-bottom:22px; position:relative}
.step::before{
  counter-increment:s; content:counter(s);
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:"Roboto Mono",monospace; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.step:not(:last-child)::after{
  content:""; position:absolute; left:15px; top:34px; bottom:4px; width:1.5px; background:var(--rule);
}
.step h4{margin:2px 0 6px; font-size:16px}
.step p,.step li{font-size:14.5px}

/* ── コード ───────────────────────────── */
.cmd{
  display:flex; align-items:center; gap:10px; margin:10px 0;
  background:#15161A; border-radius:9px; padding:11px 13px; overflow-x:auto;
}
.cmd code{font-family:"Roboto Mono",monospace; font-size:13px; color:#EFEBE2; white-space:pre; flex:1}
.cmd button{
  flex:none; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  background:#31333B; color:#D9D4C9; border:1px solid #44474F; border-radius:6px; padding:4px 10px;
}
.cmd button:hover{background:#3F424B; color:#fff}
.cmd button.ok{background:var(--set); border-color:var(--set); color:#fff}
kbd,.k{font-family:"Roboto Mono",monospace; font-size:12.5px; background:var(--paper2);
  border:1px solid var(--rule2); border-bottom-width:2px; border-radius:5px; padding:1px 6px; font-weight:500}

/* ── 注意書き ─────────────────────────── */
.note{
  border-left:4px solid var(--gold); background:#FDF8EC; border-radius:0 9px 9px 0;
  padding:13px 16px; margin:14px 0; font-size:14px; line-height:1.85; color:#4A4234;
}
.note b{color:#7A5810}
.note.go{border-left-color:var(--go); background:var(--go-w); color:#5C2415}
.note.go b{color:var(--go-d)}

/* ── OS 切替 ──────────────────────────── */
.tabs{display:flex; gap:8px; margin:6px 0 20px}
.tabs button{
  font:inherit; font-size:14px; font-weight:800; cursor:pointer; padding:9px 20px;
  border-radius:999px; border:1px solid var(--rule2); background:var(--raise); color:var(--ink2);
}
.tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
[hidden]{display:none !important}

/* ── 表 ───────────────────────────────── */
table{border-collapse:collapse; width:100%; margin:14px 0; font-size:14px}
th,td{border-bottom:1px solid var(--rule); padding:9px 10px; text-align:left; vertical-align:top}
th{background:var(--paper2); font-weight:800; font-size:13px; color:var(--ink2);
   border-bottom:1.5px solid var(--rule2)}

/* ── ボタン ───────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:16px; font-weight:900; cursor:pointer; text-decoration:none;
  background:var(--go); color:#fff; border:none; border-radius:11px; padding:16px 30px;
  box-shadow:0 2px 0 var(--go-d), 0 10px 26px -12px rgba(222,58,17,.7);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 3px 0 var(--go-d),0 16px 32px -14px rgba(222,58,17,.75)}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--go-d)}
.btn[disabled]{background:var(--rule2); box-shadow:none; cursor:not-allowed; color:#fff; transform:none}
.btn.ghost{background:var(--raise); color:var(--ink); border:1.5px solid var(--rule2); box-shadow:var(--shadow)}
.btn .sz{font-size:12px; font-weight:600; opacity:.8}

/* ── フッタ ───────────────────────────── */
footer{border-top:1px solid var(--rule); margin-top:40px; padding:24px 0 44px;
       font-size:12.5px; color:var(--ink3); line-height:2}
footer a{color:var(--ink2)}

@media (max-width:640px){
  .card{gap:16px; padding:18px}
  .chip{width:44px; height:78px}
  .chip .n{font-size:25px}
  .hd nav{gap:14px; font-size:12.5px}
  .lead{padding:38px 0 30px}
}

/* ── 設定パネル（②スタート）─────────────── */
.panel{background:var(--raise); border:1px solid var(--rule); border-radius:var(--r);
       box-shadow:var(--shadow); overflow:hidden; margin:18px 0}
.row{display:grid; grid-template-columns:186px 1fr; gap:0 20px;
     padding:20px 24px; border-bottom:1px solid var(--rule); align-items:start}
.row:last-child{border-bottom:none}
.row .lab{padding-top:2px}
.row .lab .t{font-size:15px; font-weight:800; line-height:1.5}
.row .lab .h{font-size:12px; color:var(--ink3); font-weight:500; line-height:1.7; margin-top:3px}
.row .lab .opt{display:inline-block; font-size:10.5px; font-weight:700; color:var(--ink3);
  border:1px solid var(--rule2); border-radius:999px; padding:1px 7px; margin-top:6px}
.drop{
  border:2px dashed var(--rule2); border-radius:10px; background:var(--paper);
  padding:18px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.drop:hover,.drop.over{border-color:var(--go); background:var(--go-w)}
.drop .big{font-size:14px; font-weight:700}
.drop .small{font-size:12px; color:var(--ink3); margin-top:3px}
.drop.set{border-style:solid; border-color:var(--set); background:var(--set-w); text-align:left;
  display:flex; align-items:center; gap:12px}
.drop.set .thumb{width:38px; height:38px; border-radius:7px; object-fit:cover; flex:none;
  background:var(--rule); border:1px solid var(--rule2)}
.drop.set .nm{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1; min-width:0}
.drop.set .x{font-size:12px; font-weight:700; color:var(--ink3); border:1px solid var(--rule2);
  background:var(--raise); border-radius:6px; padding:3px 9px; cursor:pointer}
select,input[type=text]{
  font:inherit; font-size:14.5px; width:100%; padding:11px 13px; border-radius:9px;
  border:1.5px solid var(--rule2); background:var(--paper); color:var(--ink);
}
select:focus,input[type=text]:focus{outline:none; border-color:var(--go)}
.hint{font-size:12px; color:var(--ink3); margin-top:7px; line-height:1.75}
.dlbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:22px 0 6px}
.prog{flex:1; min-width:200px; height:7px; border-radius:99px; background:var(--paper2);
  overflow:hidden; display:none}
.prog.on{display:block}
.prog i{display:block; height:100%; width:0; background:var(--go); transition:width .25s ease}
.status{font-size:13px; color:var(--ink2); font-weight:600}