/* ==========================================================================
   css/keeper.css —— 非遗守护人卡片
   说明：左侧填名字、选宣言、结缘一门手艺；右侧实时预览一张国风卡，
        下载用 canvas 重绘（见 js/keeper.js），这里只管页面上的预览与表单。
   ========================================================================== */

.keeper-shell {
  display: grid;
  gap: 30px;
  padding: 30px 24px 28px;
}

/* ------------------------------------------------------------------ 表单 */
.keeper-form { display: grid; gap: 20px; align-content: start; }

.field { display: grid; gap: 8px; }

.field-label {
  font-family: var(--font-kai);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink);
}

.field-hint {
  font-family: var(--font-kai);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.nick-input {
  width: 100%;
  padding: .7em 1em;
  border: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 246, .85);
  font-family: var(--font-kai);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--ink);
  box-shadow: inset 0 2px 8px rgba(31, 28, 26, .07);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.nick-input::placeholder { color: rgba(106, 95, 85, .6); letter-spacing: .12em; }

.nick-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: inset 0 2px 8px rgba(31, 28, 26, .07), 0 0 0 3px rgba(178, 58, 43, .16);
}

/* 宣言 */
.pact-list { display: grid; gap: 10px; }

.pact {
  position: relative;
  overflow: hidden;
  padding: .78em 1.1em;
  border: var(--line);
  border-left: 4px solid rgba(31, 28, 26, .18);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255, 253, 246, .7);
  font-family: var(--font-kai);
  font-size: .9rem;
  line-height: 1.7;
  letter-spacing: .04em;
  text-align: left;
  color: var(--ink-2);
  transition: border-color .24s var(--ease), background .24s var(--ease),
              transform .24s var(--ease), color .24s var(--ease);
}

.pact:hover { transform: translateX(4px); border-left-color: rgba(178, 58, 43, .5); }

.pact.on {
  border-left-color: var(--red);
  background: rgba(178, 58, 43, .09);
  color: var(--red-deep);
  box-shadow: 0 6px 16px rgba(178, 58, 43, .12);
}

/* 结缘的手艺 */
.bind-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(201, 162, 39, .7);
  border-radius: var(--radius-sm);
  background: rgba(201, 162, 39, .08);
}

.bind-item {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
}

.keeper-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -------------------------------------------------------------- 预览卡 */
.keeper-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: var(--line);
  border-radius: var(--radius-sm);
  background:
    url('../assets/svg/paper-noise.svg') 0 0 / 240px 240px,
    radial-gradient(ellipse at 50% 40%, rgba(255, 253, 246, .8), rgba(233, 222, 200, .55));
}

.kcard {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 5 / 7;
  padding: clamp(20px, 3.6vw, 34px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    url('../assets/svg/paper-noise.svg') 0 0 / 240px 240px,
    linear-gradient(170deg, #fdf9f0, #f3ebda 55%, #eee3cd);
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 5px rgba(178, 58, 43, .45),
    0 22px 46px rgba(31, 28, 26, .24),
    var(--inner);
  color: var(--ink);
}

.kcard.pop { animation: kcard-pop .6s var(--spring) both; }

@keyframes kcard-pop {
  0%   { opacity: .3; transform: translateY(18px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* 四角云纹 */
.kc-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(178, 58, 43, .5);
  border-radius: 50%;
}

.kc-corner::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgba(178, 58, 43, .28);
}

.kc-corner.tl { top: 14px; left: 14px; }
.kc-corner.tr { top: 14px; right: 14px; }
.kc-corner.bl { bottom: 14px; left: 14px; }
.kc-corner.br { bottom: 14px; right: 14px; }

.kc-top {
  text-align: center;
  font-family: var(--font-kai);
  font-size: clamp(.72rem, 2.2vw, .86rem);
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--gold);
}

.kc-title {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(1.3rem, 5.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
}

.kc-rule {
  width: 58%;
  height: 1px;
  margin: 14px auto 22px;
  background: repeating-linear-gradient(90deg, rgba(201, 162, 39, .9) 0 7px, transparent 7px 14px);
}

.kc-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
}

.kc-row > span {
  flex: 0 0 4.8em;
  font-family: var(--font-kai);
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--gold);
}

.kc-row > b {
  font-size: clamp(1rem, 3.6vw, 1.28rem);
  font-weight: 700;
  letter-spacing: .08em;
  word-break: break-all;
}

.kc-pact {
  margin-top: 18px;
  padding-left: 14px;
  border-left: 3px solid rgba(178, 58, 43, .6);
  font-family: var(--font-kai);
  font-size: clamp(.84rem, 2.8vw, .98rem);
  line-height: 2;
  letter-spacing: .06em;
  color: var(--red-deep);
}

.kc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
}

.kc-date {
  font-family: var(--font-kai);
  font-size: .78rem;
  line-height: 1.9;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

.kc-date span { color: var(--gold); }

.kc-seal {
  flex: 0 0 auto;
  width: clamp(64px, 18vw, 88px);
  height: clamp(64px, 18vw, 88px);
  padding: 6px;
  transform: rotate(-7deg);
  color: var(--red);
  filter: drop-shadow(0 6px 12px rgba(178, 58, 43, .25));
}