/* 朵拉實習日記｜各篇日記內頁（2026-10-14 改成跟首頁同一套：米白底＋淡藍網點、紙白卡片、淡藍紙膠帶、藍色色鉛筆小塗鴉）
   顏色、字體、紙膠帶都用 /suya.css 的變數（--sy-*），本檔只排日記內頁的版面。
   各篇日記與日記目錄都要先載入 /suya.css（build-index.py 的 put_style 會補上並同步版本號）。 */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--sy-sans,"Noto Sans TC",system-ui,sans-serif);
  background:var(--sy-bg,#ffffff);color:var(--sy-text,#46545d);
  font-size:20px;line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:var(--sy-blue-deep,#3b5a7d);font-weight:500}
.wrap{max-width:780px;margin:0 auto;padding:0 24px}
.lines span{display:block}

/* 頂部：不再用整條白底，標題直接寫在網點紙上 */
.top{position:relative;background:transparent;border:0}
.top .wrap{position:relative;padding-top:34px;padding-bottom:8px}
.back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:18px;font-weight:500;
  color:var(--sy-blue-deep);background:var(--sy-paper);border-radius:999px;padding:4px 16px;
  box-shadow:0 1px 2px rgba(70,84,93,.08),0 4px 10px rgba(70,84,93,.06);
}
.back:hover{background:#fff}
.kicker{
  display:inline-block;margin-top:26px;font-family:"LXGW WenKai TC","Kaiti TC","BiauKai",var(--sy-serif);
  font-size:21px;font-weight:400;letter-spacing:.06em;color:var(--sy-pencil-text,#4a6f98);transform:rotate(-2deg);
  padding-bottom:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5c20-3 50-2 70-1s36 0 46-2' fill='none' stroke='%23a9c2df' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom/100% 8px no-repeat;
}
h1{font-family:var(--sy-serif);color:var(--sy-ink);font-size:clamp(32px,4.6vw,44px);line-height:1.35;font-weight:700;letter-spacing:.04em;margin:10px 0 4px}
.meta{color:var(--sy-soft);font-size:18px;letter-spacing:.04em}
.top-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.top-row>div{min-width:0}
.top-row .sprite{filter:drop-shadow(0 4px 8px rgba(70,84,93,.16))}

/* 內文 */
main{position:relative;padding:40px 0 30px}
.say-block{font-size:20px;color:var(--sy-text)}
.say-block p{margin-bottom:22px}
h2{font-family:var(--sy-serif);color:var(--sy-ink);font-size:clamp(22px,2.6vw,26px);font-weight:700;line-height:1.45}

/* 日記本那一頁：紙白、淡陰影、上緣一條淡藍紙膠帶、略抖的鉛筆框、輕微傾斜 */
.box{
  position:relative;background:var(--sy-paper);border:0;border-radius:2px;
  box-shadow:0 1px 2px rgba(70,84,93,.08),0 12px 26px rgba(70,84,93,.10);
  padding:34px 34px 30px;margin:40px 0;transform:rotate(-.35deg);
}
.box:nth-of-type(even){transform:rotate(.3deg)}
.box::before{ /* 紙膠帶（同首頁 .pola） */
  content:"";position:absolute;z-index:2;top:-13px;left:50%;width:96px;height:26px;margin-left:-48px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--sy-tape);
  clip-path:polygon(4% 0,96% 0,100% 18%,96% 36%,100% 54%,96% 72%,100% 90%,96% 100%,4% 100%,0 82%,4% 64%,0 46%,4% 28%,0 10%);
  transform:rotate(-3deg);pointer-events:none;
}
.box:nth-of-type(even)::before{left:auto;right:16%;margin-left:0;transform:rotate(3deg)}
.box::after{ /* 略抖的手繪邊框（同首頁 .pola::after） */
  content:"";position:absolute;inset:5px;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M2 3 C60 1 140 4 198 2 C197 60 199 140 197 198 C140 196 60 199 3 197 C1 140 4 60 2 3' fill='none' stroke='%236f94c2' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
/* 2026-10-16 修：原本整個框是一張 200x200 的手繪線，日記一長（有圖）上下兩條線的彎曲會被放大好幾百 px，壓到第一行與最後一行字。
   江江要保留原本的曲線感：拆成上下左右四條，每條的彎曲照原本短日記的樣子固定在約 16px 內，框多長都一樣彎、不壓字。 */
.box::after{ /* 江江 2026-10-16：上下再彎一點、歪歪曲曲比較可愛 */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C25 2 50 9 85 5 S150 1 200 4' fill='none' stroke='%236f94c2' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C35 8 70 2 110 6 S175 9 200 5' fill='none' stroke='%236f94c2' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100%/100% 26px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 200' preserveAspectRatio='none'%3E%3Cpath d='M4 0 C7 40 2 80 5 120 S3 175 6 200' fill='none' stroke='%236f94c2' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/18px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 200' preserveAspectRatio='none'%3E%3Cpath d='M6 0 C3 50 8 95 5 135 S7 180 4 200' fill='none' stroke='%236f94c2' stroke-width='1.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 100% 0/18px 100% no-repeat;
}
.box{padding-top:48px;padding-bottom:44px}
/* 第一張紙是內文第一塊時：左上角夾一枚色鉛筆迴紋針（點綴只放這一個） */
main.wrap:has(>.box:first-child)::before{
  content:"";position:absolute;z-index:3;top:52px;left:-8px;width:54px;height:112px;transform:rotate(-14deg);
  background:url("/img/doodle/clip.webp") center/contain no-repeat;pointer-events:none;
}
.box.tip{background:var(--sy-sticky-blue);border:0;box-shadow:0 1px 1px rgba(70,84,93,.06),0 8px 18px rgba(70,84,93,.09);transform:rotate(-.8deg)}
.box.tip::after{display:none}
.box.tip h2{font-size:21px;margin-bottom:6px}
.office-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.office-head .no{
  display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;
  font-family:var(--sy-serif);font-weight:700;font-size:22px;color:var(--sy-blue-deep);background:#fff;
  box-shadow:inset 0 0 0 1.6px var(--sy-pencil);
}
.office-head small{display:block;color:var(--sy-soft);font-family:var(--sy-sans);font-size:18px;font-weight:500}
.box p{margin-bottom:14px}
.box p:last-child{margin-bottom:0}
.sigh{font-family:"LXGW WenKai TC","Kaiti TC","BiauKai",var(--sy-serif);color:var(--sy-blue-deep);font-size:21px;font-weight:400}
.box-foot{display:flex;justify-content:flex-end;margin-top:6px}

/* 換公司路線 */
.route{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px 0 30px}
.route span{background:var(--sy-paper);border-radius:999px;padding:3px 16px;font-weight:500;font-size:18px;color:var(--sy-ink);box-shadow:inset 0 0 0 1.4px var(--sy-pencil-soft)}
.route span.now{background:var(--sy-blue);color:#fff;box-shadow:none}
.route i{font-style:normal;color:var(--sy-pencil)}

/* 列表卡（舊版目錄用，保留相容） */
.post-card{
  display:flex;gap:18px;align-items:center;text-decoration:none;color:var(--sy-text);font-weight:500;
  background:var(--sy-paper);border-radius:2px;box-shadow:0 1px 2px rgba(70,84,93,.08),0 10px 22px rgba(70,84,93,.10);
  padding:22px 24px;
}
.post-card>div{min-width:0}
.soon{margin-top:22px;color:var(--sy-soft);text-align:center}

/* 篇尾一排小貓腳印（點綴） */
main.wrap::after{
  content:"";display:block;width:96px;height:89px;margin:18px 0 -10px auto;opacity:.9;transform:rotate(8deg);
  background:url("/img/doodle/doodle1.webp") center/contain no-repeat;
}

/* 頁尾：跟日記目錄、首頁同一張紙卡 */
footer{padding:24px 0 70px;text-align:center}
.card{
  display:inline-block;background:var(--sy-paper);border:1px solid var(--sy-line);border-radius:6px;
  padding:12px 26px;text-align:left;font-family:var(--sy-serif);color:var(--sy-ink);font-size:20px;line-height:1.7;
}
.card small{display:block;font-family:var(--sy-sans);color:var(--sy-soft);font-size:18px}
.foot-links{margin-top:22px;font-size:18px}
.foot-links a{text-decoration:none;margin:0 10px;color:var(--sy-blue-deep);font-weight:500}

@media (max-width:600px){
  .wrap{padding:0 16px}
  .box{padding:42px 24px 38px;transform:none}
  .box:nth-of-type(even){transform:none}
  .box.tip{transform:rotate(-.4deg)}
  .top-row .sprite{--w:80px}
  .post-card{flex-direction:column;align-items:flex-start}
  main.wrap::after{width:72px;height:67px}
}
@media (prefers-reduced-motion:reduce){
  .sprite{animation:none}
}