/* ============================================================
   koma 家驹纪念馆 —— 独立框架页（左导航 + 右 iframe，复刻原站 frameset）
   原站 main.htm body 底色 #FFFFFF（白底），右栏内容页自带黑底。
   ============================================================ */

html, body { margin: 0; padding: 0; }
body.koma-page {
  background: #fff;
  font-family: "Microsoft YaHei", SimSun, Arial, sans-serif;
  color: #000;
}

/* 整体：左栏(207) + 右栏(iframe) 横向排布 */
.koma-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background: #fff;
}

/* ---------- 左栏 207px = 18 日期条 + 186 按钮 + 3 边线 ---------- */
.koma-side {
  flex: 0 0 207px;
  width: 207px;
  display: flex;
  align-items: stretch;
  background: #fff;
}
.koma-strip {
  width: 18px;
  background: url(../../static/koma/images/bg01.jpg) repeat-y left top;
}
.koma-btns {
  width: 186px;
  padding-top: 6px;
}
.koma-btn-img { display: block; border: 0; }
.koma-btn { display: block; line-height: 0; }
.koma-btn:hover { opacity: .85; }
.koma-art { display: block; margin-top: 4px; }
.koma-line { display: block; }
.koma-back { display: block; line-height: 0; text-align: center; }
.koma-edge {
  width: 3px;
  background: url(../../static/koma/images/bg02.gif) repeat-y left top;
}

/* ---------- 右栏：内容 iframe（黑底） ---------- */
.koma-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100vh;
  border: 0;
  background: #000;
}

/* ---------- 移动端：左栏横滑置顶，内容在下 ---------- */
@media (max-width: 820px) {
  .koma-shell { flex-direction: column; }
  .koma-side {
    flex: 0 0 auto;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .koma-strip { display: none; }
  .koma-btns { width: auto; display: flex; padding: 4px 0; }
  .koma-btn-img { width: 124px; height: auto; }
  .koma-art, .koma-line, .koma-edge { display: none; }
  .koma-back { align-self: center; }
  .koma-frame { min-height: 78vh; }
}

/* ============================================================
   信签浮层：点击「歌迷写家驹」文章后，在当前窗口原地展开阅读
   ============================================================ */
.koma-letter-mask {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .22s ease;
}
.koma-letter-mask.open { opacity: 1; }
.koma-letter-mask[hidden] { display: none; }

/* 信签纸：白底 + 左侧红边（信纸感） + 淡蓝横纹 */
.koma-letter {
  position: relative;
  width: 92%; max-width: 760px;
  height: 88vh; max-height: 92vh;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 33px,
      #cfe0f0 33px, #cfe0f0 34px
    ),
    #fff;
  border: 1px solid #b9cce0;
  border-left: 6px solid #cc2222;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
  padding: 14px 14px 14px 22px;
  box-sizing: border-box;
}
/* 右上角大大的 X */
.koma-letter-x {
  position: absolute; top: 4px; right: 10px;
  font-size: 34px; line-height: 1; font-weight: bold;
  color: #cc2222; background: rgba(255,255,255,.8);
  border: 0; border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer;
  z-index: 3; padding: 0;
}
.koma-letter-x:hover { color: #fff; background: #cc2222; }
.koma-letter-frame {
  width: 100%; height: 100%;
  border: 0; background: transparent;
  border-radius: 2px;
}

/* 手机端：信签纸吃满高度，X 略小 */
@media (max-width: 820px) {
  .koma-letter { width: 96%; height: 92vh; padding-left: 18px; }
  .koma-letter-x { font-size: 30px; width: 40px; height: 40px; top: 2px; right: 6px; }
}