/* 慢性腎臟病線共用元件。只有 ckd/ 底下的頁面載入，正式站其他頁不受影響 */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.pair{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;}
.pair h3{font-size:20px;font-weight:900;color:var(--sun);margin:0 0 8px;line-height:1.45;}
.pair p{font-size:17px;line-height:1.8;margin:0;}
.pair ul{margin:0;padding-left:20px;}
.pair li{font-size:17px;line-height:1.8;}
@media(max-width:640px){ .pairs{grid-template-columns:1fr;} }
.chk{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;}
.chk h3{margin:0 0 10px;font-size:18px;}
.chk label{display:flex;gap:10px;align-items:flex-start;font-size:17px;padding:7px 0;cursor:pointer;}
.chk input{width:22px;height:22px;flex-shrink:0;margin-top:2px;accent-color:var(--sky);}
.chk label:has(input:checked){color:var(--ink-soft);}
.st{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;margin:14px 0;}
.st h3{margin:0 0 6px;font-size:18px;}
.st .say{display:block;color:var(--ink-soft);font-style:normal;font-size:17px;background:var(--sun-soft);border-radius:8px;padding:8px 14px;margin:8px 0;}
.st p{margin:8px 0 0;font-size:17px;}
.cmp{width:100%;border-collapse:collapse;margin:16px 0;font-size:17px;}
.cmp th{background:var(--sky);color:#fff;padding:10px 12px;text-align:left;font-size:17px;}
.cmp td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;background:#fff;}
.cmp td:first-child{font-weight:700;white-space:nowrap;}
.askbox{margin:4px 0 24px;}
[data-ask]{margin:4px 0 18px;}
.askin{font-family:inherit;font-size:16px;font-weight:700;color:var(--sky);background:#fff;border:1.5px dashed var(--sky);border-radius:12px;padding:8px 14px;min-height:44px;cursor:pointer;text-align:left;line-height:1.5;}
.askin span{font-weight:500;color:var(--ink);}
.askin.on{background:var(--sun-soft);border:1.5px solid var(--sun);color:var(--ink);}
.askfab{position:fixed;left:16px;bottom:16px;z-index:40;background:var(--sky);color:#fff;font-size:17px;font-weight:700;text-decoration:none;border-radius:999px;padding:10px 18px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.askbtn{font-family:inherit;font-size:18px;font-weight:700;color:var(--sky);background:#fff;border:2px solid var(--sky);border-radius:999px;padding:10px 20px;min-height:48px;cursor:pointer;}
.askbtn.on{background:var(--sun-soft);border-color:var(--sun);color:var(--ink);}
.askmsg{font-size:16px;color:var(--ink-soft);margin:8px 0 0;}
@media(max-width:640px){ .cmp td:first-child{white-space:normal;width:4.5em;} .cmp th,.cmp td{padding:8px 8px;} }
.fork{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
.fork > div{background:#fff;border:1.5px solid var(--line);border-top:6px solid var(--line);border-radius:12px;padding:14px 18px;}
.fork > div.hi{border-top-color:var(--sun);}
.fork > div.lo{border-top-color:var(--sky);}
.fork b{display:block;font-size:19px;font-weight:900;margin-bottom:6px;}
.fork p{font-size:17px;line-height:1.8;margin:0;}
@media(max-width:640px){ .fork{grid-template-columns:1fr;} }
.ab{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;}
.ab h3{margin:0 0 4px;font-size:18px;}
.ab .row{margin:14px 0 0;}
.ab .lb{font-size:17px;font-weight:700;line-height:1.6;}
.ab .tr{position:relative;height:22px;background:var(--sun-soft);border-radius:999px;overflow:hidden;margin:6px 0 4px;}
.ab .br{position:absolute;top:0;bottom:0;left:0;background:var(--sun);border-radius:999px;}
.ab .rg{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--sun) 0 6px,var(--sun-soft) 6px 12px);}
.ab .v{font-size:16px;color:var(--ink-soft);}
.ab .note{font-size:16px;color:var(--ink-soft);margin:14px 0 0;}
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:18px 0;}
.chain .lk{flex:1 1 0;min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:17px;line-height:1.6;}
.chain .lk.end{border-color:var(--sun);background:var(--sun-soft);font-weight:700;}
.chain .ar{flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:var(--sun);font-size:22px;font-weight:900;}
@media(max-width:640px){ .chain{flex-direction:column;} .chain .ar{flex-basis:30px;transform:rotate(90deg);} }
.steps{list-style:none;counter-reset:s;margin:18px 0;padding:0;}
.steps li{counter-increment:s;position:relative;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px 12px 62px;margin:0 0 10px;font-size:17px;line-height:1.7;}
.steps li::before{content:counter(s);position:absolute;left:16px;top:12px;width:32px;height:32px;border-radius:50%;background:var(--sky);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;}
.watch{background:#fff;border:1.5px solid var(--line);border-left:6px solid var(--sun);border-radius:12px;padding:14px 20px;margin:16px 0;}
.watch h3{margin:0 0 6px;font-size:18px;}
.watch ul{margin:0;padding-left:20px;}
.watch li{font-size:17px;line-height:1.8;}
.band{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px;margin:18px 0 8px;}
.band > div{border-radius:10px;padding:12px 14px;font-size:16px;line-height:1.6;background:#fff;border:1.5px solid var(--line);}
.band > div b{display:block;font-size:18px;margin-bottom:4px;}
.band .mid{background:var(--sun-soft);border:2px solid var(--sun);text-align:center;}
.band .mid b{color:var(--sun);}
@media(max-width:640px){ .band{grid-template-columns:1fr;} }
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.tags span{background:#fff;border:1.5px solid var(--sky);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:17px;}
.big{display:block;font-size:36px;font-weight:900;color:var(--sun);line-height:1.2;margin:4px 0;}
.big small{font-size:18px;font-weight:700;color:var(--ink);}
.pair.wide{grid-column:1 / -1;}
.fork.two{grid-template-columns:1fr 1fr;}
@media(max-width:640px){ .fork.two{grid-template-columns:1fr;} }
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;}
.tri > div{background:#fff;border:1.5px solid var(--line);border-top:6px solid var(--line);border-radius:12px;padding:14px 18px;}
.tri > div.stop{border-top-color:var(--sun);}
.tri > div.first{border-top-color:var(--sky);}
.tri b{display:block;font-size:19px;font-weight:900;margin-bottom:4px;}
.tri .sub{font-size:16px;color:var(--ink-soft);margin:0 0 8px;line-height:1.6;}
.tri ul{margin:0;padding-left:20px;}
.tri li{font-size:17px;line-height:1.8;}
@media(max-width:640px){ .tri{grid-template-columns:1fr;} }
/* 藥箱六樣：兩欄；擦的貼的那一張用不同顏色，提醒「不是吃的也算」 */
.tri.six{grid-template-columns:repeat(2,1fr);}
.tri > div.skin{border-top-color:var(--sky);background:#F2F8F9;}
@media(max-width:640px){ .tri.six{grid-template-columns:1fr;} }

.appetite{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;}
.appetite h3{margin:0 0 4px;font-size:18px;}
.appetite .sub{font-size:17px;margin:0 0 10px;}
.appetite .ap-row{display:grid;grid-template-columns:6em 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);}
.appetite .ap-row b{font-size:17px;line-height:1.8;}
.appetite .ap-row p{font-size:17px;line-height:1.8;margin:0;}
.appetite .ap-scale{display:flex;flex-wrap:wrap;gap:6px;}
.appetite .ap-scale label{position:relative;cursor:pointer;}
.appetite .ap-scale input{position:absolute;opacity:0;width:1px;height:1px;}
.appetite .ap-scale span{display:inline-block;font-size:17px;line-height:1.5;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;min-height:44px;box-sizing:border-box;}
.appetite .ap-scale input:checked+span{background:var(--sun-soft);border-color:var(--sun);font-weight:700;}
.appetite .ap-scale input:focus-visible+span{outline:2px solid var(--sky);outline-offset:2px;}
.appetite .ap-col{display:flex;flex-direction:column;gap:6px;}
.appetite .note{font-size:16px;color:var(--ink-soft);margin:10px 0 0;}
@media(max-width:640px){ .appetite .ap-row{grid-template-columns:1fr;gap:4px;} }
/* 三個病互相拉扯：高血壓、糖尿病兩篇共用。只畫有原文的那兩條線，高血壓和糖尿病之間不連 */
.pull{display:grid;grid-template-columns:1fr 1.5fr 1fr 1.5fr 1fr;align-items:center;gap:10px;margin:20px 0 6px;}
.pull .nd{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;font-weight:900;font-size:19px;}
.pull .nd.core{border-color:var(--sun);background:var(--sun-soft);}
.pull .nd.here{border-color:var(--sky);color:var(--sky);}
.pull .ed{font-size:16px;line-height:1.55;color:var(--ink-soft);text-align:center;}
.pull .ed::before{content:"⇄";display:block;color:var(--sun);font-size:24px;font-weight:900;line-height:1.2;}
.pull .ed span{display:block;padding:3px 0;}
.pull-cap{font-size:16px;color:var(--ink-soft);margin-top:4px;}
@media(max-width:640px){ .pull{grid-template-columns:1fr;gap:6px;} .pull .ed::before{content:"⇅";} .pull .nd{padding:12px 8px;} }
/* 時間軸：一件事前後的幾個時間點 */
.tl{list-style:none;margin:18px 0;padding:0;}
.tl li{position:relative;padding:0 0 20px 48px;}
.tl li::before{content:"";position:absolute;left:16px;top:36px;bottom:4px;width:2px;background:var(--line);}
.tl li:last-child{padding-bottom:4px;}
.tl li:last-child::before{display:none;}
.tl .when{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:var(--sun);color:#fff;font-weight:900;font-size:18px;display:flex;align-items:center;justify-content:center;}
.tl h3{margin:3px 0 6px;font-size:19px;}
.tl p{margin:0;font-size:17px;line-height:1.8;}
/* 循環圖：四格順時針繞一圈 */
.loop{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;grid-template-rows:auto 64px auto;margin:20px auto 10px;max-width:680px;}
.loop .lk{position:relative;display:flex;align-items:center;background:#fff;border:2px solid var(--sun);border-radius:16px;padding:18px 18px 16px;font-size:17px;line-height:1.6;box-shadow:0 2px 0 rgba(0,0,0,.03);}
.loop .lk .no{position:absolute;top:-11px;left:14px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--sun);color:var(--sun);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;}
.loop .lk.end{background:var(--sun-soft);font-weight:700;}
.loop .lk.end .no{background:var(--sun);border-color:var(--sun);color:#fff;}
.loop .ar{display:flex;align-items:center;justify-content:center;}
.loop .ar svg{width:44px;height:16px;fill:none;stroke:var(--sun);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.loop .a2 svg{transform:rotate(90deg);}
.loop .a3 svg{transform:rotate(180deg);}
.loop .a4 svg{transform:rotate(-90deg);}
.loop .n1{grid-area:1/1;}.loop .a1{grid-area:1/2;}.loop .n2{grid-area:1/3;}.loop .a2{grid-area:2/3;}
.loop .n3{grid-area:3/3;}.loop .a3{grid-area:3/2;}.loop .n4{grid-area:3/1;}.loop .a4{grid-area:2/1;}
@media(max-width:640px){
  .loop{grid-template-columns:1fr 30px 1fr;grid-template-rows:auto 40px auto;}
  .loop .lk{padding:18px 12px 12px;font-size:16px;}
  .loop .ar svg{width:28px;height:14px;}
}
/* 會讓數字一時變動的事：每張卡上半講怎麼回事，下半講家裡可以做的 */
.flux{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;}
.flux > div{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;}
.flux h3{margin:0 0 8px;font-size:19px;font-weight:900;color:var(--sky);line-height:1.45;}
.flux p{font-size:17px;line-height:1.8;margin:0;}
.flux p + p{margin-top:8px;}
.flux p.do{padding-top:12px;}
.flux p.do span{display:block;border-top:1.5px dashed var(--line);padding-top:10px;}
@media(max-width:640px){ .flux{grid-template-columns:1fr;} }
/* 示意走勢：一個一個點會跳，連起來看方向 */
.trend{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 18px 10px;margin:18px 0;}
.trend svg{display:block;width:100%;height:auto;}
.trend .pt{fill:#fff;stroke:var(--sky);stroke-width:3;}
.trend .zig{fill:none;stroke:var(--line);stroke-width:2;}
.trend .way{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round;}
.trend .ax{stroke:var(--line);stroke-width:1.5;}
.trend figcaption{font-size:16px;color:var(--ink-soft);line-height:1.6;margin-top:6px;}
/* 藥盒標示示意：成分那一欄標亮 */
.label{max-width:560px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 18px;margin:16px 0;}
.label-t{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--ink-soft);}
.label-row{margin:0;padding:8px 10px;font-size:17px;line-height:1.6;border-top:1px solid var(--line);}
.label-row span{display:inline-block;min-width:4.5em;font-weight:700;}
.label-row.hl{background:var(--sun-soft);border:2px solid var(--sun);border-radius:8px;}
.label.jp .label-row > span{display:block;margin-bottom:2px;}
.label.jp .label-row span.jp-l{font-weight:500;color:var(--ink-soft);font-size:16px;margin-top:8px;}
.label.jp .label-row span.jp-s{font-weight:400;}
.label.jp .label-row span.jp-l span{display:inline;min-width:0;font-weight:inherit;}
/* 日文段落用日文字型（只載入〈生病的那幾天〉用到的字），否則「臓」「断」等日文漢字會掉到別的字型、粗細對不上 */
[lang="ja"]{font-family:'Noto Sans JP','Noto Sans TC',"Microsoft JhengHei",sans-serif;}
/* 日文說明書上的「腎臓病」：粗字加橘色底線就好；不加色塊，色塊看起來像可以點的按鈕 */
.jw{font-weight:900;border-bottom:3px solid var(--sun);padding:0 1px;white-space:nowrap;}
/* 入口頁：家裡每天的那幾件事，每一項帶一個連到細講那一篇的連結 */
.musts{list-style:none;counter-reset:m;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0;padding:0;}
.musts li{counter-increment:m;position:relative;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 18px 14px 60px;}
.musts li::before{content:counter(m);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--sun);color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;}
.musts h3{margin:0 0 4px;font-size:19px;font-weight:900;line-height:1.45;}
.musts p{margin:0;font-size:17px;line-height:1.75;}
.musts a{display:inline-block;margin-top:6px;font-size:17px;font-weight:700;color:var(--sun);text-decoration:none;}
@media(max-width:640px){ .musts{grid-template-columns:1fr;} }
/* 入口頁：依讀者此刻卡住的地方分組，左邊是那個時刻，右邊是該讀的篇 */
.moments{margin:18px 0;display:grid;gap:12px;}
.moment{display:grid;grid-template-columns:200px 1fr;gap:16px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;}
.moment .when{margin:0;}
.moment .when b{display:block;font-size:19px;font-weight:900;color:var(--sun);line-height:1.45;}
.moment .when span{display:block;font-size:16px;color:var(--ink-soft);line-height:1.6;margin-top:4px;}
.moment ul{list-style:none;margin:0;padding:0;}
.moment li{margin:0 0 6px;font-size:17px;line-height:1.6;}
.moment li a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--line);}
.moment li a:hover{color:var(--sun);border-color:var(--sun);}
.moment li .no{display:inline-block;min-width:2.2em;color:var(--ink-soft);font-weight:700;}
@media(max-width:640px){ .moment{grid-template-columns:1fr;gap:8px;} }
/* 一組只有一個連結時收成同一張卡，一列一個時刻，不然五張空卡太重 */
.moments.compact{gap:0;background:#fff;border:1.5px solid var(--line);border-radius:12px;}
.moments.compact .moment{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:12px 20px;align-items:center;background:none;}
.moments.compact .moment:last-child{border-bottom:none;}
.moments.compact .moment ul li{margin:0;}
/* 入口頁：從哪一篇開始讀。左邊一條路線，每一組是一站；最後一站是終點，底色不同。編號跟右側路線欄同一套，不要另編 */
.route{position:relative;margin:22px 0;padding-left:40px;}
.stop{position:relative;margin:0 0 18px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 20px 18px;}
.stop:last-child{margin-bottom:0;}
.stop:not(:last-child)::after{content:"";position:absolute;left:-27px;top:46px;bottom:-20px;width:4px;border-radius:2px;background:var(--line);}
.stop:nth-last-child(2)::after{background:linear-gradient(var(--line),var(--sun));}
.stop::before{content:"";position:absolute;left:-38px;top:20px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:6px solid var(--sun);}
.stop.goal{background:var(--sun-soft);border-color:#F6C9A8;}
.stop.goal::before{background:var(--sun);border-color:var(--sun);box-shadow:0 0 0 5px var(--sun-soft);}
.st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px;}
.st-h b{font-size:21px;font-weight:900;color:var(--ink);line-height:1.4;}
.st-h span{font-size:16px;color:var(--ink-soft);line-height:1.5;}
.st-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.st-links a{display:flex;align-items:flex-start;gap:12px;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;}
.stop.goal .st-links a{background:#fff;}
.st-links a:hover{border-color:var(--sun);background:#fff;}
.st-links .n{flex-shrink:0;width:30px;height:30px;margin-top:1px;border-radius:50%;background:#EDE6DC;color:var(--ink-soft);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.st-links a:hover .n{background:var(--sun);color:#fff;}
.st-links .tx b{display:block;font-size:17px;font-weight:700;line-height:1.5;}
.st-links .tx i{display:block;font-style:normal;font-size:16px;color:var(--ink-soft);line-height:1.6;margin-top:2px;}
@media(max-width:640px){
  .st-links{grid-template-columns:1fr;}
  .route{padding-left:30px;} .stop::before{left:-30px;width:22px;height:22px;border-width:5px;} .stop:not(:last-child)::after{left:-21px;top:40px;}
  .stop{padding:14px 14px 16px;}
}
/* 不要用 .big 這個名字（ckd.css 已有）；書背的字限六個字，手機上要關掉 br */
.tbig{display:flex;border:2px solid var(--sun);border-radius:14px;overflow:hidden;background:#fff;margin:0 0 18px;text-decoration:none;color:var(--ink);transition:.15s;}
.tbig:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(31,41,51,.12);}
.tbig .spine{background:var(--sun);color:#fff;flex:0 0 160px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:21px;font-weight:900;letter-spacing:1px;line-height:1.5;padding:22px 12px;}
.tbig .bd{padding:20px 24px 18px;flex:1;min-width:0;}
.tbig .hook{display:block;font-size:18px;line-height:1.85;margin:0 0 8px;}
.tbig .edge{display:block;font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0;}
.tbig .go2{display:inline-block;margin-top:12px;font-size:18px;font-weight:700;color:var(--sun);}
.tbig .go2 i{font-style:normal;display:inline-block;transition:transform .16s;}
.tbig:hover .go2 i{transform:translateX(5px);}
@media(max-width:700px){
  .tbig{flex-direction:column;}
  .tbig .spine{flex:none;padding:12px;font-size:20px;}
  .tbig .spine br{display:none;}
  .tbig .bd{padding:16px 18px 16px;}
}
/* 路線欄最上面的入口頁不編號，用同樣大小的圓圈放一個點，跟下面的編號對齊 */
.rail a.entry .n{font-size:0;}
.rail a.entry .n::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun);}
.rail a.entry.on .n::after{background:#fff;}
.chk[data-tell] label:has(input:checked){color:var(--ink);font-weight:500;}
.chk.watch label{font-size:17px;}
.steps [data-ask]{margin:10px 0 0;}
.tellbox{margin:12px 0 0;}
.tellbox label{display:block;font-size:16px;color:var(--ink-soft);margin:0 0 6px;}
.tellbox textarea{width:100%;box-sizing:border-box;min-height:88px;font-family:inherit;font-size:17px;line-height:1.6;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;margin:0 0 10px;}
.tips{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0;}
.tips h3{margin:0 0 6px;font-size:18px;}
.tips ul{list-style:none;margin:0;padding:0;}
.tips li{position:relative;margin:0;padding:5px 0 5px 22px;font-size:17px;line-height:1.7;}
.tips li::before{content:"";position:absolute;left:4px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--sky);}
.tips [data-ask]{margin:8px 0 0;}
.tbig .usel{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px;}
.tbig .usel span{display:inline-block;font-size:16px;font-weight:700;color:var(--ink);background:var(--sun-soft);border:1px solid #f0d9c4;border-radius:999px;padding:3px 12px;}