/* =========================================================
   수인공존사회 · 공유 스타일 (세계관 / 캐릭터 공용)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root{
  --paper:#f3e8d0; --paper-2:#efe1c4; --ink:#3b3328; --ink-soft:#6b5e4c; --line:#d8c7a3;
  --note-yellow:#ffe98a; --note-pink:#ffc4d4; --note-mint:#bfe6c4; --note-blue:#bcd9f0;
  --note-orange:#ffcf9e; --note-purple:#d9c8f0; --note-white:#fdf8ec;
  --meat:#e9837a; --plant:#7cba8d; --omni:#d4a45e;
  --tape:rgba(255,255,255,.45);
  /* 폰트: 제목은 손글씨, 본문은 가독성 좋은 고딕 */
  --font-title:'Nanum Pen Script', cursive;
  --font-body:'Noto Sans KR', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.7;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.5), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(160,140,100,.10) 31px 32px),
    linear-gradient(135deg, var(--paper), var(--paper-2));
  background-attachment:fixed; min-height:100vh; overflow-x:hidden; position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px 90px;position:relative;z-index:1;}

/* ===== 상단 메인 탭 (세계관 / 캐릭터) ===== */
.topbar{position:sticky;top:0;z-index:50;padding:18px 0 0;background:linear-gradient(180deg,var(--paper) 70%,transparent);}
.brand{font-family:var(--font-title);font-size:1.9rem;text-align:center;letter-spacing:1px;color:var(--ink-soft);margin-bottom:6px;}
.brand b{color:var(--ink);}
.maintabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding:0 4px;}
.maintab{
  font-family:var(--font-title);font-size:1.7rem;text-decoration:none;color:var(--ink-soft);
  background:var(--note-white);padding:9px 26px 12px;border:3px solid var(--ink);border-bottom:none;
  border-radius:14px 14px 0 0;transform:translateY(3px);transition:.15s;box-shadow:2px -2px 6px rgba(60,45,20,.12);
}
.maintab:hover{transform:translateY(0);}
.maintab.active{background:var(--note-yellow);color:var(--ink);transform:translateY(3px);position:relative;z-index:2;
  box-shadow:2px -3px 8px rgba(60,45,20,.18);}
.maintab .em{font-size:1.2rem;}

/* ===== 섹션 / 제목 ===== */
.page-head{text-align:center;padding:34px 0 8px;}
.page-head h1{font-family:var(--font-title);font-size:clamp(2.8rem,7vw,4.4rem);line-height:.95;}
.page-head .sub{font-family:var(--font-body);font-size:1.25rem;color:var(--ink-soft);}
.sec-title{font-family:var(--font-title);font-size:2.5rem;display:inline-block;position:relative;padding:0 6px;margin-bottom:4px;}
.sec-title::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:10px;background:var(--note-yellow);opacity:.7;z-index:-1;border-radius:4px;transform:rotate(-.6deg);}
.sec-lead{font-family:var(--font-body);font-size:1.2rem;color:var(--ink-soft);margin-bottom:22px;}

/* ===== 서브 탭 (세계관 소주제) ===== */
.subtabs{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin:26px 0 30px;}
.subtab{font-family:var(--font-body);font-size:1.2rem;cursor:pointer;background:var(--note-white);
  border:2px dashed var(--line);color:var(--ink-soft);padding:5px 18px;border-radius:22px;transition:.15s;user-select:none;}
.subtab:hover{transform:translateY(-2px);}
.subtab.active{background:var(--ink);color:var(--paper);border-style:solid;border-color:var(--ink);}
.panel{display:none;animation:fade .35s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ===== 포스트잇 노트 ===== */
.grid{display:grid;gap:30px;}
.g3{grid-template-columns:repeat(3,1fr);} .g2{grid-template-columns:repeat(2,1fr);}
@media(max-width:780px){.g3,.g2{grid-template-columns:1fr;}}
.note{position:relative;border-radius:4px;padding:24px 22px;background:var(--note-white);
  box-shadow:5px 8px 18px rgba(60,45,20,.18);transition:transform .18s ease,box-shadow .18s ease;}
.note:hover{transform:translateY(-5px);box-shadow:8px 14px 26px rgba(60,45,20,.26);}
.note.r1{transform:rotate(-1.3deg);}.note.r1:hover{transform:translateY(-5px) rotate(-.3deg);}
.note.r2{transform:rotate(1.4deg);}.note.r2:hover{transform:translateY(-5px) rotate(.3deg);}
.note.r3{transform:rotate(-.6deg);}.note.r3:hover{transform:translateY(-5px) rotate(0);}
.note h3{font-family:var(--font-title);font-size:1.9rem;line-height:1;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.note p{font-size:1.1rem;margin-bottom:8px;}
.note ul{list-style:none;margin:6px 0 2px;}
.note li{font-size:1.05rem;padding-left:20px;position:relative;}
.note li::before{content:"·";position:absolute;left:5px;top:-2px;font-size:1.3rem;color:var(--ink-soft);}
.tag{display:inline-block;font-family:var(--font-body);font-size:.98rem;padding:1px 12px;border-radius:20px;color:#fff;margin-bottom:6px;}
.bias{font-family:var(--font-body);font-size:1.02rem;color:var(--ink-soft);border-top:1.5px dashed var(--line);margin-top:12px;padding-top:9px;}
.bias b{color:var(--ink);}
.taboo{font-family:var(--font-body);margin-top:10px;}
.taboo .x{display:inline-block;background:#fde2df;color:#c0524a;border:1.5px dashed #e9837a;border-radius:14px;
  padding:0 10px;margin:3px 4px 0 0;font-size:.95rem;}

.meat-note{background:#fde2df;} .meat-note h3,.meat .ico{color:var(--meat);}
.plant-note{background:#dcefe1;} .plant-note h3,.plant .ico{color:var(--plant);}
.omni-note{background:#f6e9cf;} .omni-note h3,.omni .ico{color:#b07e2f;}
.tag.meat{background:var(--meat);} .tag.plant{background:var(--plant);} .tag.omni{background:var(--omni);}

.ico{width:40px;height:40px;flex:0 0 auto;}
.ico-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.ico-row .ico{width:28px;height:28px;opacity:.7;}

/* 마스킹 테이프 */
.tape{position:absolute;width:110px;height:28px;background:var(--tape);
  border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6);
  box-shadow:0 1px 3px rgba(0,0,0,.08);top:-14px;left:50%;transform:translateX(-50%) rotate(-4deg);}
.tape.pink{background:rgba(255,170,200,.5);} .tape.mint{background:rgba(150,220,170,.55);} .tape.blue{background:rgba(150,200,240,.55);}

/* 찢긴 대사 메모 */
.torn{background:var(--note-white);padding:16px 20px;font-size:1.2rem;max-width:560px;margin:0 auto 16px;
  box-shadow:3px 5px 12px rgba(60,45,20,.16);position:relative;
  clip-path:polygon(0 6%,4% 0,12% 5%,22% 1%,33% 6%,46% 0,58% 5%,70% 1%,82% 6%,93% 0,100% 5%,100% 95%,93% 100%,80% 95%,67% 100%,54% 95%,42% 100%,30% 95%,18% 100%,7% 95%,0 100%);}
.torn.a{transform:rotate(-1deg);} .torn.b{transform:rotate(1.1deg);background:var(--note-pink);}
.torn .who{font-family:var(--font-body);font-size:.92rem;color:var(--ink-soft);display:block;margin-bottom:2px;}

/* VS */
.clash{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;}
@media(max-width:680px){.clash{grid-template-columns:1fr;}.vs{margin:6px auto;}}
.vs{font-family:var(--font-title);font-size:3rem;color:var(--meat);transform:rotate(-8deg);text-align:center;}

/* 떠다니는 두들 */
.doodle{position:absolute;opacity:.12;color:var(--ink);pointer-events:none;z-index:0;}

footer{text-align:center;margin-top:80px;font-family:var(--font-body);font-size:1.1rem;color:var(--ink-soft);}
footer .paw{display:inline-block;color:var(--meat);opacity:.7;}

/* 등장 애니메이션 */
.reveal{opacity:0;transform:translateY(22px) rotate(var(--rot,0deg));}
.reveal.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);}

/* =========================================================
   캐릭터 페이지 전용
   ========================================================= */
.char-picker{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0 34px;}
.char-pill{display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--note-white);
  border:2.5px solid var(--ink);border-radius:30px;padding:6px 18px 6px 8px;transition:.15s;user-select:none;}
.char-pill:hover{transform:translateY(-3px);}
.char-pill.active{background:var(--c,var(--note-yellow));color:#fff;}
.char-pill.active .pill-ico{color:#fff;}
.char-pill .pill-ico{width:30px;height:30px;color:var(--c,var(--ink));}
.char-pill .pill-name{font-family:var(--font-title);font-size:1.5rem;}

.char-empty{text-align:center;font-family:var(--font-body);font-size:1.3rem;color:var(--ink-soft);
  border:3px dashed var(--line);border-radius:16px;padding:50px 20px;background:#fffaef;}

/* 프로필 상단 */
.profile{display:none;}
.profile.active{display:block;animation:fade .4s ease;}
.profile-top{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;margin-bottom:14px;}
@media(max-width:760px){.profile-top{grid-template-columns:1fr;justify-items:center;text-align:center;}}

/* 폴라로이드 사진 + 의상 토글 */
.polaroid{background:#fff;padding:14px 14px 50px;box-shadow:6px 10px 24px rgba(60,45,20,.26);
  transform:rotate(-2deg);position:relative;width:300px;}
.polaroid img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;background:#eee;transition:opacity .2s ease;}
.polaroid .ptape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:120px;height:34px;background:rgba(255,233,138,.7);box-shadow:0 2px 5px rgba(0,0,0,.12);}
.polaroid .caption{position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--font-title);font-size:1.7rem;color:var(--ink);}
.outfit-toggle{display:flex;gap:8px;justify-content:center;margin-top:22px;}
.outfit-btn{font-family:var(--font-body);font-size:1.05rem;cursor:pointer;background:var(--note-white);
  border:2px dashed var(--line);color:var(--ink-soft);padding:4px 16px;border-radius:20px;transition:.15s;}
.outfit-btn.active{background:var(--c,var(--ink));color:#fff;border-style:solid;border-color:var(--c,var(--ink));}

/* 이름/기본정보 */
.profile-name{font-family:var(--font-title);font-size:3.4rem;line-height:1;}
.profile-tagline{font-family:var(--font-body);font-size:1.2rem;color:var(--ink-soft);margin-bottom:6px;}
.profile-badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.badge{font-family:var(--font-body);font-size:1rem;background:var(--c,var(--ink));color:#fff;padding:2px 14px;border-radius:18px;}
.badge.line{background:transparent;color:var(--ink);border:2px solid var(--c,var(--ink));}
.basics{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.basic{background:var(--note-white);border:1.5px dashed var(--line);border-radius:12px;padding:6px 14px;text-align:center;min-width:74px;}
.basic .k{font-family:var(--font-body);font-size:.9rem;color:var(--ink-soft);display:block;}
.basic .v{font-family:var(--font-title);font-size:1.5rem;line-height:1;}
.profile-quote{font-size:1.3rem;border-left:5px solid var(--c,var(--ink));padding-left:14px;color:var(--ink-soft);margin-top:12px;}

/* 본문 섹션 카드들 (masonry 느낌) */
.info-grid{columns:2;column-gap:28px;margin-top:30px;}
@media(max-width:760px){.info-grid{columns:1;}}
.info-card{break-inside:avoid;background:var(--note-white);border-radius:5px;padding:20px 22px;margin-bottom:28px;
  box-shadow:4px 7px 16px rgba(60,45,20,.16);border-top:6px solid var(--c,var(--note-yellow));}
.info-card:nth-child(odd){transform:rotate(-.5deg);} .info-card:nth-child(even){transform:rotate(.5deg);}
.info-card h4{font-family:var(--font-title);font-size:1.8rem;margin-bottom:8px;}
.info-card p{font-size:1.08rem;margin-bottom:6px;}
.info-card ul{list-style:none;}
.info-card li{font-size:1.05rem;padding-left:20px;position:relative;margin-bottom:3px;}
.info-card li::before{content:"✎";position:absolute;left:0;top:0;font-size:.85rem;color:var(--c,var(--ink-soft));}
.info-card .lead{font-family:var(--font-body);color:var(--ink-soft);}

/* 키워드 강조 (목록 항목 안 <b>) */
.info-card li b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 60%, var(--c,#ffe98a) 60% 92%);
  padding:0 2px;margin-right:2px;border-radius:2px;opacity:.95;}

/* 한 줄 요약 */
.profile-summary{font-family:var(--font-title);font-size:1.7rem;line-height:1.25;color:var(--ink);
  background:var(--note-yellow);display:inline-block;padding:8px 16px;border-radius:4px;margin:6px 0 4px;
  transform:rotate(-.8deg);box-shadow:3px 4px 10px rgba(60,45,20,.14);}
/* 핵심 태그 */
.key-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px;}
.key-tag{font-family:var(--font-body);font-size:1.02rem;color:var(--c,var(--ink-soft));
  border:2px dashed var(--c,var(--line));border-radius:16px;padding:1px 12px;background:#fffaef;}

/* 카드 제목 아이콘 */
.info-card h4 .ic{margin-right:6px;}
/* 카드 안 칩 (성향/성격 태그) */
.card-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.card-chip{font-family:var(--font-body);font-size:.95rem;background:var(--c,var(--ink));color:#fff;
  padding:1px 11px;border-radius:14px;opacity:.88;}

/* 관계 블록 (캐릭터 하단) */
.relation-block{margin-top:46px;padding-top:30px;border-top:3px dashed var(--line);text-align:center;}
.relation-title{font-family:var(--font-title);font-size:2.4rem;display:inline-block;position:relative;padding:0 6px;}
.relation-title::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;
  background:var(--c,var(--note-yellow));opacity:.45;z-index:-1;border-radius:4px;transform:rotate(-.6deg);}
.relation-lead{font-family:var(--font-body);font-size:1.2rem;color:var(--ink-soft);margin-bottom:20px;}
.clash-side{text-align:center;}
.clash-txt{font-family:var(--font-title);font-size:1.6rem;margin-top:4px;line-height:1.1;}

/* =========================================================
   조연 · 감초 NPC 카드 + 팝업
   ========================================================= */
.npc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 20px;margin-top:8px;}
.npc-card{
  position:relative;cursor:pointer;font-family:var(--font-body);text-align:center;
  background:var(--note-white);border:none;border-radius:5px;padding:16px 12px 18px;
  box-shadow:4px 7px 16px rgba(60,45,20,.18);transition:transform .16s ease,box-shadow .16s ease;
  border-bottom:7px solid var(--c,#ccc);
}
.npc-card:nth-child(odd){transform:rotate(-1deg);} .npc-card:nth-child(even){transform:rotate(1deg);}
.npc-card:hover{transform:translateY(-5px) rotate(0);box-shadow:7px 13px 24px rgba(60,45,20,.28);}
.npc-tape{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:74px;height:22px;background:rgba(255,233,138,.7);box-shadow:0 2px 4px rgba(0,0,0,.1);}
.npc-photo{width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#eee;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.12);}
.npc-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.npc-ico{width:30px;height:30px;color:var(--c,#888);margin:8px auto 2px;}
.npc-name{font-family:var(--font-title);font-size:1.7rem;line-height:1;color:var(--ink);}
.npc-job{font-family:var(--font-body);font-size:1rem;color:var(--ink-soft);line-height:1.2;margin-top:2px;}

/* 팝업 모달 */
.modal-back{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(40,30,18,.5);backdrop-filter:blur(3px);padding:20px;}
/* 모달이 열리면 sticky 탭바가 위로 삐져나오지 않게 가림 */
body.modal-open .topbar{z-index:1;}
.modal-back.open{display:flex;animation:fade .25s ease;}
.modal-card{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;
  background:var(--note-white);border-radius:8px;border-bottom:12px solid var(--c,#ccc);
  box-shadow:0 20px 50px rgba(0,0,0,.4);transform:rotate(-.6deg);animation:pop .3s cubic-bezier(.2,.9,.3,1.2);}
@keyframes pop{from{opacity:0;transform:rotate(-.6deg) scale(.9) translateY(14px);}to{opacity:1;transform:rotate(-.6deg) scale(1) translateY(0);}}
.modal-x{position:absolute;top:10px;right:12px;z-index:3;cursor:pointer;border:none;
  background:rgba(255,255,255,.85);width:34px;height:34px;border-radius:50%;font-size:1.1rem;color:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.2);font-family:var(--font-body);}
.modal-x:hover{background:#fff;}
.modal-photo{width:100%;aspect-ratio:1/1;max-height:300px;overflow:hidden;background:#eee;}
.modal-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.modal-body{padding:20px 24px 26px;text-align:center;}
.modal-ico{width:46px;height:46px;color:var(--c,#888);margin:-44px auto 4px;position:relative;
  background:var(--note-white);border-radius:50%;padding:7px;box-shadow:0 3px 8px rgba(0,0,0,.18);}
.modal-name{font-family:var(--font-title);font-size:2.6rem;line-height:1;}
.modal-job{font-family:var(--font-body);font-size:1.15rem;color:var(--ink-soft);margin-bottom:8px;}
.modal-badges{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;}
.modal-basics{font-family:var(--font-body);font-size:1rem;color:var(--ink-soft);margin-bottom:12px;}
.modal-summary{font-family:var(--font-title);font-size:1.55rem;line-height:1.25;color:var(--ink);
  background:var(--note-yellow);display:inline-block;padding:7px 14px;border-radius:4px;transform:rotate(-.8deg);
  box-shadow:2px 3px 8px rgba(60,45,20,.14);margin-bottom:14px;}
.modal-feat{list-style:none;text-align:left;max-width:300px;margin:0 auto;}
.modal-feat li{font-size:1.1rem;padding-left:22px;position:relative;margin-bottom:4px;}
.modal-feat li::before{content:"✎";position:absolute;left:2px;top:0;font-size:.85rem;color:var(--c,var(--ink-soft));}

/* 크랙 전용 배지 (조연 섹션) */
.only-badge{display:inline-block;vertical-align:middle;margin-left:10px;transform:rotate(-3deg);
  font-family:var(--font-body);font-size:1.05rem;color:#fff;background:var(--meat);
  padding:3px 14px;border-radius:18px;box-shadow:2px 3px 7px rgba(60,45,20,.2);
  border:2px solid #fff;}

/* 도입부 블록 (관계 안에서 도입부별 구분) */
.intro-block{margin:0 auto 30px;max-width:660px;padding:22px 20px 8px;
  background:#fffaef;border:2px dashed var(--line);border-radius:14px;}
.intro-block + .intro-block{margin-top:6px;}
.intro-head{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.intro-name{font-family:var(--font-title);font-size:1.9rem;color:var(--ink);}
.intro-badge{font-family:var(--font-body);font-size:.95rem;color:#fff;background:var(--ink-soft);
  padding:2px 12px;border-radius:16px;transform:rotate(-2deg);border:2px solid #fff;
  box-shadow:1px 2px 5px rgba(60,45,20,.18);}
.intro-badge.crack{background:var(--meat);}
.intro-desc{font-family:var(--font-body);font-size:1.1rem;color:var(--ink-soft);text-align:center;
  max-width:520px;margin:0 auto 14px;line-height:1.4;}

/* =========================================================
   추천 유저 플레이 카드 (그룹 분리)
   ========================================================= */
.play-grid{margin-top:14px;}
.play-group-head{display:flex;align-items:center;gap:12px;margin:26px 2px 14px;}
.play-group-head::before,.play-group-head::after{content:"";flex:1;height:0;border-top:2px dashed var(--line);}
.pg-label{font-family:var(--font-title);font-size:1.7rem;color:var(--ink-soft);
  background:var(--note-white);border:2px solid var(--line);border-radius:20px;padding:2px 18px;white-space:nowrap;}
.play-group-head.crack .pg-label{color:#fff;background:var(--meat);border-color:var(--meat);}

.play-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:680px){.play-row{grid-template-columns:1fr;}}
.play-card{position:relative;background:var(--note-white);border-radius:14px;padding:26px 24px 24px;
  box-shadow:5px 8px 18px rgba(60,45,20,.16);overflow:hidden;text-align:center;
  transition:transform .16s ease,box-shadow .16s ease;}
.play-card:nth-child(odd){transform:rotate(-.5deg);} .play-card:nth-child(even){transform:rotate(.5deg);}
.play-card:hover{transform:translateY(-5px) rotate(0);box-shadow:8px 14px 26px rgba(60,45,20,.24);}
.play-card.crack{background:#fdf1ee;}                 /* 크랙 전용은 살짝 다른 톤 */
/* 번호 코너 */
.play-num{position:absolute;top:0;left:0;width:54px;height:54px;background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-weight:700;font-size:1.2rem;display:flex;align-items:flex-start;justify-content:flex-start;
  padding:6px 0 0 9px;border-radius:14px 0 100% 0;}
.play-num.crack{background:var(--meat);}
.play-ico{width:44px;height:44px;color:var(--plant);margin:4px auto 12px;}
.play-card.crack .play-ico{color:var(--meat);}
.play-title{font-family:var(--font-title);font-size:2.1rem;line-height:1;color:var(--ink);}
.play-line{width:80%;height:0;border-top:2px dashed var(--line);margin:10px auto;}
.play-desc{font-family:var(--font-body);font-size:1.12rem;color:var(--ink-soft);line-height:1.4;}