/* ============================================
回憶靜心齋 - Meditation Chamber
現代文人靜室 × 心理筆記本
Prefix: medc-
============================================ */

:root{
  --grid-color: rgba(150, 140, 130, 0.08);
  --primary-color: #3a3530;
  --secondary-color: #7a6b56;
  --accent-color: #c0a080;
  --paper-bg: #f9f7f2;
  --border-color: #e0d8cc;
}

.medc-wrapper *{ box-sizing:border-box; margin:0; padding:0; }

.medc-wrapper{
  min-height: 100vh;
  width: 100%;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(135deg,
      #f8f4e9 0%,
      #f2ecdb 15%,
      #ebe5d2 30%,
      #e5dfca 45%,
      #dfd8c2 60%,
      #d9d2ba 75%,
      #d3ccb2 90%,
      #cdc6aa 100%);
  font-family: 'Noto Serif TC', serif;
  color: #3a3129;
  position: relative;
}

/* -------------------------
   背景紙紋層
------------------------- */
.medc-paper-texture{
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(180, 170, 160, 0.03) 0%, transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(160, 150, 140, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.3;
}

.medc-water-stains{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background:
    radial-gradient(circle at 18% 22%, rgba(120, 110, 100, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 78% 68%, rgba(120, 110, 100, 0.08) 0%, transparent 58%),
    radial-gradient(circle at 50% 85%, rgba(120, 110, 100, 0.06) 0%, transparent 62%);
  filter: blur(0.2px);
}

/* 文房裝飾：硯台 / 紙鎮 */
.medc-inkstone{
  position: fixed;
  bottom: 80px;
  left: 80px;
  width: 70px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 40'%3E%3Crect x='5' y='5' width='60' height='30' rx='4' fill='%23d0c8c0' stroke='%23b0a59a' stroke-width='1'/%3E%3Cpath d='M15,20 Q25,15 35,20 T55,20' stroke='%239c8e7a' stroke-width='0.8' fill='none'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.medc-paperweight{
  position: fixed;
  bottom: 80px;
  right: 80px;
  width: 60px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect x='5' y='5' width='50' height='30' rx='4' fill='%23d0c8c0' stroke='%23b0a59a' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.medc-incense-burner{
  position: fixed;
  left: 40px;
  top: 140px;
  width: 88px;
  height: 88px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cpath d='M18 58h52l-6 16H24z' fill='%23d0c8c0' stroke='%23b0a59a' stroke-width='1'/%3E%3Cellipse cx='44' cy='54' rx='30' ry='10' fill='%23e7dfd5' stroke='%23b0a59a' stroke-width='1'/%3E%3Cpath d='M44 20c-6 7 10 9 4 18' fill='none' stroke='%239c8e7a' stroke-width='1.2' opacity='.7'/%3E%3Cpath d='M52 24c-6 7 10 9 4 18' fill='none' stroke='%239c8e7a' stroke-width='1.2' opacity='.45'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.medc-lotus-decoration{
  position: fixed;
  right: 40px;
  top: 150px;
  width: 92px;
  height: 92px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'%3E%3Cpath d='M46 18c6 10 6 18 0 28c-6-10-6-18 0-28z' fill='%23d9d2ba' stroke='%23b0a59a' stroke-width='1'/%3E%3Cpath d='M24 30c10 4 16 10 20 22c-12-2-18-8-20-22z' fill='%23e5dfca' stroke='%23b0a59a' stroke-width='1' opacity='.85'/%3E%3Cpath d='M68 30c-10 4-16 10-20 22c12-2 18-8 20-22z' fill='%23e5dfca' stroke='%23b0a59a' stroke-width='1' opacity='.85'/%3E%3Ccircle cx='46' cy='56' r='6' fill='%23c0a080' opacity='.35'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* -------------------------
   主容器
------------------------- */
.medc-chamber-container{
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(26px, 5vh, 60px) clamp(16px, 3vw, 30px);
  position: relative;
  z-index: 1;
}

/* 標題（list） */
.medc-chamber-title{
  font-size: clamp(2rem, 5vw, 2.8rem);
  text-align: center;
  color: var(--primary-color);
  margin-bottom: 15px;
  letter-spacing: clamp(4px, 2vw, 8px);
  font-weight: 400;
}

.medc-chamber-subtitle{
  text-align:center;
  color: var(--secondary-color);
  font-style: italic;
  letter-spacing: clamp(2px, 1vw, 4px);
  margin-bottom: clamp(34px, 6vh, 60px);
  font-size: clamp(0.92rem, 2vw, 1rem);
}

.medc-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,140,130,0.4), transparent);
  margin: clamp(24px, 4vh, 40px) auto clamp(34px, 6vh, 60px);
  max-width: min(420px, 80vw);
}

/* -------------------------
   返回按鈕（single/list 共用）
------------------------- */
.medc-back-button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #4a3c2a;
  margin: 0 0 22px;
  padding: 10px 16px;
  border: 1px solid rgba(224, 216, 204, 0.9);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.medc-back-button::before{ content:"←"; opacity:.7; }
.medc-back-button:hover{
  transform: translateY(-2px);
  border-color: rgba(192, 160, 128, 0.7);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* ============================================
   _index / list 內容：靜心手札（anchor scroll）
============================================ */
.medc-anchor-scroll{
  margin: clamp(36px, 6vh, 60px) auto clamp(56px, 8vh, 100px);
  max-width: min(820px, 92vw);
}

.medc-anchor-handscroll{
  position: relative;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: clamp(26px, 4vh, 46px) clamp(20px, 4vw, 56px) clamp(26px, 4vh, 46px) clamp(58px, 8vw, 120px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.85;
  color: #4a3c2a;
  overflow: hidden;
}

.medc-margin-notes{
  position:absolute;
  left: clamp(12px, 3vw, 28px);
  top: clamp(34px, 6vh, 56px);
  bottom: clamp(34px, 6vh, 56px);
  width: clamp(52px, 8vw, 70px);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: clamp(14px, 2vh, 22px);
}

.medc-note-sticker{
  background: #f9f5eb;
  border: 1px solid #d4c9b8;
  border-radius: 6px;
  padding: clamp(8px, 1.5vh, 12px) clamp(6px, 1vw, 10px);
  text-align:center;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
  font-family: 'Iansui', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  color: var(--secondary-color);
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  min-height: clamp(58px, 8vh, 80px);
  display:flex;
  justify-content:center;
  align-items:center;
  line-height: 1.2;
  letter-spacing: .5px;
  transition: transform .2s ease;
}
.medc-note-sticker span{ font-size: clamp(1.15rem, 3vw, 1.4rem); margin-bottom: 6px; opacity: .7; }
.medc-note-sticker:hover{ transform: scale(1.05); }

.medc-pencil-line{
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    #c0a080 0%,
    #c0a080 10px,
    transparent 10px,
    transparent 20px
  );
  height: calc(100% - 40px);
  opacity: 0.35;
}

.medc-scroll-content{ position: relative; z-index: 1; }
.medc-scroll-content p{ margin-bottom: 1.8em; position: relative; }
.medc-scroll-content p::before{
  content:"";
  position:absolute;
  left: -25px;
  top: 1.2em;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(176,155,124,0.5), transparent);
}
.medc-ink-blot-corner{
  position:absolute;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle,
    rgba(100,80,60,0.15) 0%,
    rgba(100,80,60,0.05) 50%,
    transparent 70%);
  border-radius: 50%;
  pointer-events:none;
  z-index:0;
  filter: blur(2px);
}

/* ============================================
   list：卡片
============================================ */
.medc-letter-list{
  display:grid;
  gap: clamp(18px, 3vh, 25px);
  margin-top: 24px;
}

.medc-letter-card{
  background:#fff;
  padding: clamp(18px, 3vh, 25px);
  border: 1px solid #e8dfd0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  will-change: transform, box-shadow;
  transform: translateZ(0);
}
.medc-letter-card:hover,
.medc-letter-card:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border-color: var(--accent-color);
  outline:none;
}

.medc-tear-corner{
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style: solid;
  border-width: 0 clamp(15px,2vw,20px) clamp(15px,2vw,20px) 0;
  border-color: transparent #e0d8cc transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.05));
}

.medc-letter-title{
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  margin-bottom: 12px;
  color: var(--primary-color);
}
.medc-letter-title a{
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.medc-letter-title a:hover,
.medc-letter-title a:focus{
  color: var(--accent-color);
  text-decoration: underline;
  outline:none;
}
.medc-letter-excerpt{
  color: var(--secondary-color);
  line-height: 1.65;
  margin-bottom: 12px;
}
.medc-letter-date{
  color: #9c8e7a;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  text-align: right;
}

.medc-empty-state{
  text-align:center;
  padding: clamp(40px, 6vh, 60px) clamp(20px, 3vw, 30px);
  color:#9c8e7a;
  font-style: italic;
  background: rgba(245, 242, 235, 0.6);
  border-radius: 6px;
  margin-top: 30px;
}

/* ============================================
   single：紙張堆疊 / 文章區
============================================ */
.medc-paper-stack{
  position: relative;
  padding-top: 10px;
}

.medc-paper-stack::before,
.medc-paper-stack::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 6px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(224,216,204,0.85);
  box-shadow: 0 8px 26px rgba(0,0,0,0.06);
  z-index: 0;
}
.medc-paper-stack::before{ transform: translate(10px, 10px); }
.medc-paper-stack::after{ transform: translate(5px, 5px); opacity: .85; }

.medc-paper{
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid rgba(224,216,204,0.95);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}

.medc-paper-fold{
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent rgba(224,216,204,0.9) transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.05));
  z-index: 2;
}

.medc-paper-content{
  padding: clamp(22px, 4vw, 44px);
  color: #3a3129;
  line-height: 1.95;
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
}

/* 文章標題/Meta */
.medc-article-header{
  text-align:center;
  margin-bottom: 18px;
}
.medc-article-title{
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  letter-spacing: clamp(2px, 1vw, 6px);
  font-weight: 400;
  color: var(--primary-color);
  margin-bottom: 10px;
}
.medc-article-subtitle{
  color: var(--secondary-color);
  font-style: italic;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.medc-article-meta{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
.medc-meta-date,
.medc-meta-tags{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(249,247,242,0.85);
  border: 1px solid rgba(224,216,204,0.95);
  border-radius: 999px;
  color: #6b5f52;
  font-size: 0.95rem;
}

/* ✅ 右上角圖（3:4、不裁切、不壓字） */
.medc-hero-figure{
  float: right;
  width: clamp(180px, 28%, 260px);
  margin: 4px 0 14px 16px; /* 左側留白避免壓到字 */
}
.medc-hero-frame{
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(224,216,204,0.95);
  background: rgba(249,247,242,0.65);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden; /* 只裁框，不裁圖（圖用 contain） */
}
.medc-hero-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ 不裁切 */
  display:block;
}
.medc-hero-caption{
  margin-top: 8px;
  font-size: 0.9rem;
  color: #8d7f6a;
  text-align: center;
}

/* 正文（確保 content 內的元素都吃得到） */
.medc-article-body p{ margin: 0 0 1.6em; }
.medc-article-body strong{ color:#8B4513; font-weight:700; }
.medc-article-body blockquote{
  border-left: 3px solid #C0A080;
  margin: 1.8em 0;
  padding: 1.2em 1.2em;
  background: rgba(245, 242, 235, 0.55);
  border-radius: 0 6px 6px 0;
  color: #5a4634;
  font-style: italic;
}
.medc-article-body hr{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(150,140,130,0.35), transparent);
  margin: 2.2em auto;
  width: min(520px, 70%);
}

/* 清除 float 造成的後續區塊擠壓 */
.medc-page-break,
.medc-article-navigation{
  clear: both;
}

.medc-page-break{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,140,130,0.35), transparent);
  margin: 28px auto;
  width: min(600px, 85%);
}

.medc-article-navigation{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.medc-nav-link{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(224,216,204,0.95);
  background: rgba(255,255,255,0.7);
  text-decoration:none;
  color: #4a3c2a;
  max-width: 48%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.medc-nav-link:hover{
  transform: translateY(-2px);
  border-color: rgba(192,160,128,0.8);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* -------------------------
   RWD 1000 -> 300
------------------------- */
@media (max-width: 1000px){
  .medc-chamber-container{ max-width: 860px; }
  .medc-inkstone, .medc-paperweight{ opacity: .35; }
  .medc-hero-figure{ width: clamp(170px, 32%, 250px); }
}

@media (max-width: 860px){
  .medc-inkstone, .medc-paperweight{ display:none; }
  .medc-incense-burner, .medc-lotus-decoration{ opacity:.35; }
  .medc-anchor-handscroll{ padding-left: clamp(46px, 7vw, 100px); }
}

@media (max-width: 768px){
  /* ✅ 小螢幕不要浮動，改成置中、避免壓字 */
  .medc-hero-figure{
    float: none;
    width: min(320px, 100%);
    margin: 10px auto 18px;
  }
  .medc-hero-caption{ font-size: 0.88rem; }
  .medc-paper-content{ padding: 22px 18px; }
  .medc-margin-notes{ display:none; }
  .medc-anchor-handscroll{ padding: 22px 18px; }
}

@media (max-width: 600px){
  .medc-article-meta{ gap: 8px; }
  .medc-meta-date, .medc-meta-tags{ font-size: 0.92rem; padding: 7px 12px; }
  .medc-nav-link{ max-width: 49%; }
}

@media (max-width: 480px){
  .medc-incense-burner, .medc-lotus-decoration{ display:none; }
  .medc-article-title{ letter-spacing: 2px; }
  .medc-nav-link{ padding: 10px 12px; border-radius: 9px; }
}

@media (max-width: 360px){
  .medc-paper-content{ padding: 18px 14px; }
  .medc-meta-date, .medc-meta-tags{ font-size: 0.9rem; }
  .medc-nav-link{ max-width: 46%; }
}

@media (max-width: 320px){
  .medc-article-title{ font-size: 1.55rem; }
  .medc-nav-link{ padding: 9px 10px; }
}

@media (max-width: 300px){
  .medc-paper-content{ padding: 16px 12px; }
  .medc-meta-date, .medc-meta-tags{ font-size: 0.86rem; padding: 6px 10px; }
}