@font-face {
  font-family: 'SchoolSafetyStubbyChalk';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2508-2@1.0/HakgyoansimMondangbunfilR.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* =====================
   기본 세팅
===================== */

img,svg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  -ms-interpolation-mode: nearest-neighbor;
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #FFF7DC;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;   /* macOS 사파리/크롬 번짐 방지 */
  -moz-osx-font-smoothing: grayscale;

  text-rendering: geometricPrecision;    /* 글자 형태 안정 */
}

.viewport{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #FFF7DC;
}




/* =====================
   화면 공통
===================== */
.screen{
  position:absolute;
  top:50%;
  left:50%;
  width:375px;
  height:812px;

  transform: translate(-50%, -50%);
  display:none;
}

.screen.active{
  display:block;
}


/* =====================
   배경 체크
===================== */
.bg-check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 0;

}


/* =====================
   로고
===================== */
.logo {
  position: absolute;
  width: 360px;
  top: 135px;
  left: 9px;
  z-index: 10;
}

/* 로고 애니메이션 */
.pulse {
  animation: pulse 2.2s ease-in-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* =====================
   아이콘 공통
===================== */
.icon {
  position: absolute;
  pointer-events: none; /* ⭐ 클릭 방해 제거 */
}

/* 둥실 애니메이션 */
.float {
  animation: float 2.6s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* =====================
   메인 아이콘 위치
===================== */
.main_cherry { width: 99px; top: 365px; left: 87px; display: block; animation-delay:0s;}
.main_dog { width: 129px; top: 620px; left: 86px; display: block;}
.main_footprint { width: 58px; top: 500px; left: 9px; display: block;}
.main_heartwing { width: 221px; top: 26px; left: 159px;display: block; animation-delay:0.8s; }
.main_musicmark { width: 91px; top: 340px; left: 257px;display: block; animation-delay:0.6s; }
.main_pencil { width: 178px; top: -23px; left: -15px; display: block;}
.main_twinkle { width: 53px; top: 449px; left: 225px; display: block; animation-delay: 0.8s;}
.main_wing_left { width: 45px; top: 640px; left: 31px;display: block; animation-delay: 0.7s; }
.main_wing_right { width: 51px; top: 640px; left: 220px;display: block; animation-delay: 0.7s;}
.main_star_pink_big { width: 125px; top: 270px; left: -10px; display: block;animation-delay: 0.5s; }
.main_star_pink_small { width: 98px; top: 440px; left: 281px;display: block; animation-delay: 0.9s; }
.main_star_sky_big { width: 76px; top: 590px; left: 285px; display: block; animation-delay: 0.3s;}
.main_star_sky_small { width: 62px; top: 460px; left: 82px; display: block;animation-delay: 0.7s; }

/* ===================== 시작 버튼 ===================== */
.start-wrap { 
  position: absolute; width: 187px; /* 피그마 버튼 너비 */
  top: 544px; /* 피그마 Y */
  left: 50%; transform: translateX(-50%); cursor: pointer; 
  z-index: 999;
   margin-left: -100px; /* 미세 조정 */
  }
.start-btn { 
    width: 100%; display: block; z-index: 10;
}

/* 시작하기 텍스트 */
.start-text { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  font-family: 'SchoolSafetyStubbyChalk'; 
  font-size: 30px; /* 피그마 기준 */ 
  color: #FF7EB6; /* 필요하면 조절 */ 
  letter-spacing: 0.5px; 
  white-space: nowrap; 
  pointer-events: none; /* 클릭은 버튼이 받게 */ 
  -webkit-font-smoothing: antialiased; 
}

/* =====================
로딩 페이지
===================== */
.loading-dogs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
}

.dog {
  width: 42px;
  animation: dogBounce 0.6s ease-in-out infinite;
}

.d1 { animation-delay: 0s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.3s; }
.d4 { animation-delay: 0.45s; }

@keyframes dogBounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* =====================
   MAIN PAGE FIX (🔥 이것만)
===================== */
.screen.main{
  position:absolute;
  top:50%;
  left:50%;
  width:375px;
  height:812px;
  transform: translate(-50%, -50%);
  margin:0;
  padding:0;
}



/* =====================
   PAGE 2
===================== */
.page2 { position: relative; }

.note {
  position: absolute; 
  width: 348px;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
}

.footprints_1 { position: absolute; width: 77px; top: 68px; left: 47px; }
.footprints_2 { position: absolute; width: 50px; top: 548px; left: 310px; }

.page2-dogs { position: absolute; width: 90px; top: 721px; left: 267px; }
.pencil { position: absolute; width: 151px; top: 630px; left: -25px; }
.page2_heartwing { position: absolute; width: 230px; top: 24px; left: 164px; }

.typing-area {
  position: absolute;
  top: 180px;              /* 노트 안 기준 */
  left: 52%;
  transform: translateX(-50%);
  width: 280px;
  text-align: center;
}

.typing-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}

.typing-gap {
  height: 14px;            /* 문단 간격 */
}

.typing-text {
  font-family: 'SchoolSafetyStubbyChalk';
  font-size: 22px;
  line-height: 1.3;
  white-space: nowrap;
}

.typing-emoji {
  width: 24px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.typing-emoji.show {
  opacity: 1;
  transform: scale(1);
}

/* =====================
   이름 입력
===================== */
.name-area {
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-bg-2 {
  width: 200px;
}

.name-input {
  position: absolute;
  width: 200px;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  left: -6%;
  

  font-family: 'SchoolSafetyStubbyChalk';
  font-size: 25px;
  -webkit-font-smoothing: antialiased; 
}

.next-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
}

.next-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}




/* ===== PAGE 3 ONLY ===== */
.page3 {
  position: relative;
}

/* === 노트 영역 (page2와 동일, 건드리지 않음) === */
.p3-note-area {
  position: relative;
  width: 348px;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
}

/* 노트 배경 (레이아웃 높이 생성용) */
.page3 .note-bg {
  width: 100%;
  display: block;
}

/* === ⭐ 노트 위 좌표 캔버스 (핵심) === */
.p3-note-content {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  padding: 0;              /* ⭐ 중요: 좌표 어긋남 방지 */
  box-sizing: border-box;

  pointer-events: auto;
}

/* =========================
   텍스트 영역 (top / left)
========================= */

/* 날짜 */
.page3 .p3-date {
  position: absolute;
  top: 25px;        /* 피그마 Y */
  left: 40px;       /* 피그마 X */
  font-size: 17px;
  color: #ccc;
  font-family: 'SchoolSafetyStubbyChalk';
}

/* 제목 */
.page3 .p3-title {
  position: absolute;
  top: 65px;        /* 피그마 */
  left: 70px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'SchoolSafetyStubbyChalk';
}

.page3 .p3-name-wrap {
  position: relative;
  display: inline-block; 
}

/* ===== 이름 pill ===== */
.page3 .p3-name-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

   padding: 8px 14px;   
  background-color: #FFE6F1;
  border: 2px solid #FF6EB2;
  border-radius: 999px;

  box-sizing: border-box;
}

/* 이름 텍스트 */
.page3 .p3-title {
   white-space: nowrap;
  position: absolute;
  top: 80px;            /* ← 지금 쓰는 값 유지 */
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 이름 pill */
.page3 .p3-name-pill {
  display: inline-flex;
  align-items: center;

  padding: 4px 14px;
  background-color: #fff;
  border: 1.5px solid #FF6EB2;
  border-radius: 999px;
}

/* 이름 텍스트 */
.page3 .p3-name-text {
  font-size:  22px;
  line-height: 1;
  white-space: nowrap;

  position: static;      /* ⭐ 이거 중요 */
}

/* 의 오오티디 */
.page3 .p3-title-text {
  font-size: 27px;
  color: #FF6EB2;
   white-space: nowrap;

  position: static;      /* ⭐ 절대 absolute 금지 */
}

/* 피부색을 선택하세요 */
.page3 .p3-guide-text {
  position: absolute;
  top: 130px;
  left: 5px;
  width: 100%;
  text-align: center;

  font-size: 20px;
  color: #ada8aa;
  font-family: 'SchoolSafetyStubbyChalk';

  z-index: 10;   /* ⭐ 이거 추가 */
}

/* =========================
   캐릭터 (위치=좌표 / 크기=scale만)
========================= */

.page3 .p3-character-area {
  position: absolute;
  top:-30px;        /* 피그마 */
  left: 0px;

  width: 375px;
  height: 812px;

  transform: scale(1);          /* ⭐ 크기만 여기서 */
  transform-origin: top center;

  z-index: 2;
}

.page3 .p3-char {
  position: absolute;
  inset: 0;
  width: 100%;
  image-rendering: pixelated;
}

/* =========================
   스킨칩
========================= */

.page3 .p3-skin-chips {
  position: absolute;
  top: 570px;        /* 피그마 */
  left: 48px;
  display: flex;
  gap: 12px;
  z-index: 2;
}

.page3 .p3-chip {
  position: relative;
  background: none;
  border: none;
  padding: 0;
}

.page3 .p3-paw {
  position: absolute;
  top: 8px;
  left: 49%;
  transform: translateX(-50%);
  width: 45px;
  display: none;
}

.page3 .p3-chip.active .p3-paw {
  display: block;
}

.page3 .p3-next-btn,
.page3 .next-btn {
  position:absolute;
  right:30px;
  top:330px;
  width:55px;
  z-index:9999;
  cursor:pointer;
}


/* =====================
 🧷 기본 공통
===================== */
.page4 {
  width: 375px;
  height: 812px;
  background: #FBEDF8;
  position: relative;
  overflow: hidden;
}

/* =====================
  체크배경 숨김
===================== */
.page4 .bg-check{
  display:none;
}

/* =====================
 📌 Character 영역
===================== */

/* 캐릭터 레이어 (픽셀 유지 대상) */
.p4-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* =====================
      PAGE 4 BASE
===================== */
.page4{
  position:relative;
  width: 375px;
  height: 812px;
  background:#FFE6F1;
  overflow:hidden;
}

/* =====================
      TITLE 영역 유지
===================== */
.page4 .p4-title{
  position:absolute;
  top: 50px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}

/* 이름 pill */
.page4 .p4-name-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 2px 14px;
  background:#fff;
  border:2px solid #FF6EB2;
  border-radius:999px;

  box-sizing:border-box;
}

/* 이름 텍스트 */
.page4 .p4-name-text{
  font-family: 'SchoolSafetyStubbyChalk';
  font-size:20px;
  color:#000;
  white-space:nowrap;
}

/* “의 오오티디” */
.page4 .p4-title-text{
  font-family: 'SchoolSafetyStubbyChalk';
  font-size:22px;
  font-weight:700;
  color:#FF60A8;
  white-space:nowrap;
}

/* =====================
     CHARACTER 영역 (⭐ 수정된 부분)
===================== */
.character-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

/* 그림자 */
.character-wrap::after {
  content: "";
  position: absolute;
  bottom: -415px;              /* 발 바로 아래 */
  width: 100px;               /* 작고 납작 */
  height: 20px;
  background: #eeb5cd;       /* 배경(#FFE6F1)보다 살짝 진한 핑크 */
  border-radius: 50%;
  opacity: 0.9;
  z-index: 0;
}

.character {
  position: relative;
  z-index: 1; /* 그림자 위로 */
}

/* 캐릭터 기본 박스 : 화면 기준 */
.p4-character{
  position:absolute;
  top: 10px;
  left:0;

  width:375px;
  height:812px;

  transform: translateY(4px) scale(0.75);
  transform-origin: top center;  /* 🔥 여기 */

  z-index:2;
  pointer-events:none;
}

/* 캐릭터 파츠 공통 기준 */
.p4-character img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
}


/* 🔥 눈 */
.p4-eyes .eye{
  display:none;
}
.p4-eyes .eye.show{
  display:block;
}

/* 🔥 볼 */
.p4-cheeks .cheek{
  display:none;
}
.p4-cheeks .cheek.show{
  display:block;
}

/* 몸 */
#p4-body{
  display:block;
}
#p4-under{
  display:block;
}

/* 눈 / 볼 이미지 */
.p4-eyes img{
  display:block;
}
.p4-cheeks img{
  display:block;
}

/* 머리 */
.p4-hair img{
  display:block;
}

/* 기본적으로 모든 헤어 컬러 그룹 숨김 */
.p4-hair {
  display:none;
}

/* 선택된 컬러만 보이게 */
.p4-hair.showColor {
  display:block;
}

/* 컬러 그룹 안 모든 헤어 기본 숨김 */
.p4-hair .hair {
  display:none;
}

/* 선택된 헤어만 보여주기 */
.p4-hair .hair.show {
  display:block;
}

/* =====================
     HAIR COLOR CHIPS
===================== */
.hair-color-wrap{
  position:absolute;
  top: 150px;
  left: 40px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hair-chip{
  position: relative;

  background: none;
  border: none;            
  padding: 0;
  margin: 0;

  cursor: pointer;

  outline: none;
  box-shadow: none;

  appearance: none;         
  -webkit-appearance: none;  
  -moz-appearance: none;

  -webkit-tap-highlight-color: transparent; 
}


/* 헤어칩 안의 기본 칩 이미지 (발바닥은 제외) */
.hair-chip img:not(.p4-paw){
  width:50px;
  height:auto;
  image-rendering:pixelated;
}

/* 발바닥 크기 & 위치 */
.p4-paw{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-52%, -55%);
  width:35px;
  height:auto;
  display:none;
  image-rendering:pixelated;
}

.hair-chip.active .p4-paw{
  display:block;
}

/* =====================
     CATEGORY ICONS
===================== */
.p4-category-icons{
  position:absolute;
  bottom:343px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:20px;
  z-index:1000;
  pointer-events:auto;
}

.cat-icon{
  width:45px;
  height:45px;
  border-radius:60%;
  background:#FFFFFF;
  border:3px solid #FFB3DF;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.cat-icon img{
  width:25px;
  height:25px;
  image-rendering:pixelated;
}

.cat-icon.active{
  background:#FFE0F2;
}

/* =====================
      LEFT / RIGHT
===================== */
.p4-arrow{
  position:absolute;
  top:42%;
  width:60px;
  height:auto;
  image-rendering:pixelated;
}

.p4-arrow.left{
  left:22px;
}

.p4-arrow.right{
  right:22px;
}

/* =====================
     CATEGORY BOX
===================== */
.p4-category-box{
  position:absolute;
  bottom:0px;
  left:50%;
  transform:translate(-50%, -33px);
  width:92%;
  height:300px;

  background:#fff;
  border-radius:30px;
  border:4px solid #FDBEED;
  box-shadow:0 0 0 4px #FFEDFA inset;

  overflow:hidden; 
}

.p4-category-scroll{
  height:100%;
  padding:40px 22px;

  overflow-y:auto;
  overflow-x:hidden;
}

.p4-category-scroll::-webkit-scrollbar{
  width:6px;
}

.p4-category-scroll::-webkit-scrollbar-thumb{
  background:#FF9EC9;
  border-radius:30px;
}

/* =====================
     THUMBNAIL 기본
===================== */
.p4-list{
  display:none;
  margin:0;
  padding:0;
}

.p4-list.show{
  display:block;
}

.p4-list .item{
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}

.p4-list .item img{
  width:auto;
  height:auto;
  display:block;
  image-rendering:pixelated;
}

.p4-list .item.selected img{
  outline:4px solid #FDBEED;
  outline-offset:4px;
  border-radius:12px;
}

/* =====================
     EYES 3 x 6
===================== */
.p4-list.eyes.show{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items:center;
  gap:40px 20px;
}

/* =====================
     CHEEK 4 x 1
===================== */
.p4-list.cheek.show{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items:center;
  align-items:center;
  row-gap:10px;
}

/* =====================
     HAIR 3열 (스크롤)
===================== */
.p4-list.hair.show .hair-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items:center;
  gap:40px 20px;
}

/* =====================
   CATEGORY별 썸네일 사이즈 조절
===================== */
.p4-list.eyes .item img{
  width:80px;
}
.p4-list.cheek .item img{
  width:50px;
}
.p4-list.hair .item img{
  transform: scale(1.2);     
  transform-origin: center;  
}


/* =====================
   HAIR COLOR VISIBLE
===================== */
.hair-color-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}

.screen.page4.show-hair .hair-color-wrap{
  opacity:1;
  pointer-events:auto;
}
img:not([src]),
img[src=""] { display:none!important; }

.screen.page4.active,
.screen.page5.active,
.screen.page6.active {
  background-color: #FFE6F1;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.9) 1.6px,
      transparent 1.4px
    ),
    radial-gradient(
      rgba(255, 255, 255, 0.9) 1.6px,
      transparent 1.4px
    );
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
}

/* =====================
   튜토리얼 안내 오버레이
===================== */

.guide-overlay{
  position:absolute;
  inset:0;
  z-index:9999;

  display:none;
  align-items:center;
  justify-content:center;
}

/* 반투명 흰 배경 */
.guide-dim{
  position:absolute;

  /* ⭐ 여기 숫자만 조절하면 됨 */
  inset: 130px 10px;  /* 위아래 40px, 좌우 20px 여백 */

  background: rgba(255,255,255,0.89);
  border-radius: 30px;   /* 팝업 느낌 */
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}


/* 안내 이미지 */
.guide-image{
  width:375px;
  height:812px;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
}

/* 닫기 버튼 */
.guide-close{
  position:absolute;

  /* 🔧 위치 조절용 (여기만 건드리면 됨) */
  top:150px;
  right:30px;

  /* 🔧 버튼 크기 */
  width:60px;
  height:36px;

  border-radius:15%;
  border:none;

  background:#ff6fae;
  color:#fff;

  /* 🔧 X 크기 */
  font-size:20px;
  font-weight:500;
   font-family: 'SchoolSafetyStubbyChalk';

  line-height:0;          /* 글자 위아래 여백 제거 */
  padding:0;

  cursor:pointer;
  z-index:3;
  pointer-events:auto;
}




/* =====================
      PAGE 5 BASE
===================== */
.page5{
  position:relative;
  width: 375px;
  height: 812px;
  background:#FFE6F1;
  overflow:hidden;
}

/* =====================
      PAGE 5 loading sentence
===================== */
.page5 .bg-check{
  display:none;
}

.dog-tip{
  position:absolute;
  right: 260px;
  bottom:700px;   /* 하단 UI 위쪽에 뜨게 */
  z-index:20;
  display:flex;
  flex-direction:row;      /* 가로 정렬 */
  align-items:center;     /* 세로 가운데 */
  gap:8px;
}

.dog-icon{
  width:28px;
  height:auto;
 position: relative;
 z-index: 2;
  
}

.dog-bubble{
  position:absolute;
  left:32px;
  bottom:1px; 
  font-family:'SchoolSafetyStubbyChalk';
  background:#fff;
  color:#939393;
  font-size:14px; 

  height:18px;
  padding:0 10px;
  border-radius:14px;

  display:flex;               /* 중앙 정렬 */
  align-items:center;         /* 세로 중앙 */
  justify-content:center;     /* 가로 중앙 */

  white-space: nowrap;        /* 한 줄 유지 */
}

.dog-bubble::before{
  content:"";
  position:absolute;
  left:-4px;        /* 말풍선 왼쪽에 붙이기 */
  bottom:5px;      /* 세로 위치 조절 */

  width:0;
  height:0;

  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-right:6px solid #fff;   /* 말풍선 색이랑 맞추기 */
}




/* =====================
      TITLE (page4 재사용)
===================== */
.page5 .p5-title{
  position:absolute;
  top: 50px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}

/* 이름 pill */
.page5 .p5-name-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 2px 14px;
  background:#fff;
  border:2px solid #FF6EB2;
  border-radius:999px;

  box-sizing:border-box;
}

/* 이름 텍스트 */
.page5 .p5-name-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:20px;
  color:#000;
  white-space:nowrap;
}

/* “의 오오티디” */
.page5 .p5-title-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:22px;
  font-weight:700;
  color:#FF60A8;
  white-space:nowrap;
}

/* =====================
     되돌리기 버튼
===================== */
.refresh-btn{
  background:#fff; 
  border:none;
  border:2px solid #FDBEED;
  position:absolute;
  top:55px;
  left:310px;
  z-index:30;
  cursor:pointer;

  width:33px;
  height:33px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.refresh-btn svg{
  width:18px;
  height:18px;
  display:block;
}


/* =====================
     CHARACTER (page4 동일)
===================== */
.page5 .p5-character{
  position:absolute;
  top:0;
  left:0;

  width:375px;
  height:812px;

  transform: translateY(4px) scale(0.75);
  transform-origin: top center;

  z-index:2;
  pointer-events:none;
}

/* =====================
     ❌ HAIR COLOR CHIP 제거
===================== */
.page5 .hair-color-wrap{
  display:none!important;
}

/* =====================
     CATEGORY ICONS
===================== */
.page5 .p4-category-icons{
  position:absolute;
  bottom:343px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px; /* 7개라서 살짝 줄임 */
  z-index:1000;
}

/* =====================
     CATEGORY BOX
===================== */
.page5 .p4-category-box{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%, -33px);
  width:92%;
  height:300px;

  background:#fff;
  border-radius:30px;
  border:4px solid #FDBEED;
  box-shadow:0 0 0 4px #FFEDFA inset;

  overflow:hidden;
}



/* =====================
     PAGE5 CATEGORY GRID
===================== */

/* TOP : 5 x 9 */
.page5 .p4-list.top.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:32px 19px;
  justify-items:center;
}

/* PANTS : 5 x 4 */
.page5 .p4-list.pants.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:23px 18px;
  justify-items:cen
}

/* skirt : 5 x 3 */
.page5 .p4-list.skirt.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* onepiece : 5 x 4 */
.page5 .p4-list.onepiece.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* outer : 5 x 6 */
.page5 .p4-list.outer.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* socks : 3 x 5 */
.page5 .p4-list.socks.show{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* shoes : 3 x 6 */
.page5 .p4-list.shoes.show{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* =====================
   PAGE5 CLOTHES HIDE
===================== */

/* TOP */
.p4-top img{
  display:none;
}

/* PANTS */
.p4-pants img{
  display:none;
}

/* SKIRT */
.p4-skirt img{
  display:none;
}

/* ONEPIECE */
.p4-onepiece img{
  display:none;
}

/* OUTER */
.p4-outer img{
  display:none;
}

/* SOCKS */
.p4-socks img{
  display:none;
}

/* SHOES */
.p4-shoes img{
  display:none;
}

/* =====================
   PAGE5 CLOTHES SHOW
===================== */

.p4-top img.show,
.p4-pants img.show,
.p4-skirt img.show,
.p4-onepiece img.show,
.p4-outer img.show,
.p4-socks img.show,
.p4-shoes img.show{
  display:block;
}

/* =====================
   UNDERWEAR
===================== */

#p5-under{
  display:block;
}

/* =====================
   📌 CLOTHES LAYER ORDER
===================== */

/* 최상단 */
.p4-outer {
  position:absolute;
  inset:0;
  z-index: 70;
}

/* 아우터 + 원피스 */
.p4-onepiece {
  position:absolute;
  inset:0;
  z-index: 65;
}

/* 상의 */
.p4-top {
  position:absolute;
  inset:0;
  z-index: 60;
}

/* 치마 */
.p4-skirt {
  position:absolute;
  inset:0;
  z-index: 55;
}

/* 바지 */
.p4-pants {
  position:absolute;
  inset:0;
  z-index: 50;
}

/* 신발 */
.p4-shoes {
  position:absolute;
  inset:0;
  z-index: 45;
}

/* 양말 */
.p4-socks {
  position:absolute;
  inset:0;
  z-index: 40;
}

/* 언더웨어 */
#p4-under,
#p5-under {
  position:absolute;
  inset:0;
  z-index: 10;
}

/* =====================
      PAGE 6 BASE
===================== */
.page6{
  position:relative;
  width:375px;
  height:812px;
  background:#FFE6F1;
  overflow:hidden;
}

/* 체크배경 */
.page6 .bg-check{
  display:none;
}

/* =====================
     TITLE (page5 재사용)
===================== */
.page6 .p5-title{
  position:absolute;
  top: 50px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
}

/* 이름 pill */
.page6 .p5-name-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 2px 14px;
  background:#fff;
  border:2px solid #FF6EB2;
  border-radius:999px;

  box-sizing:border-box;
}

/* 이름 텍스트 */
.page6 .p5-name-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:20px;
  color:#000;
  white-space:nowrap;
}

/* “의 오오티디” */
.page6 .p5-title-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:22px;
  font-weight:700;
  color:#FF60A8;
  white-space:nowrap;
}

/* =====================
     되돌리기 버튼
===================== */
.page6 .refresh-btn{
  background:#fff; 
  border:2px solid #FDBEED;
  position:absolute;
  top:55px;
  left:310px;
  z-index:30;
  cursor:pointer;

  width:33px;
  height:33px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =====================
     CHARACTER (page5 동일)
===================== */
.page6 .p5-character{
  position:absolute;
  top:0;
  left:0;

  width:375px;
  height:812px;

  transform: translateY(4px) scale(0.75);
  transform-origin: top center;

  z-index:2;
  pointer-events:none;
}

/* =====================
   PAGE6 장신구 숨김 기본
===================== */
.p4-bag img,
.p4-case img,
.p4-hat img,
.p4-face img,
.p4-ect img{
  display:none;
}

/* 선택된 장신구만 보이기 */
.p4-bag img.show,
.p4-case img.show,
.p4-hat img.show,
.p4-face img.show,
.p4-ect img.show{
  display:block;
}

/* =====================
   장신구 레이어 순서
===================== */
.p4-bag{ position:absolute; inset:0; z-index:80; }
.p4-case{ position:absolute; inset:0; z-index:75; }
.p4-hat{ position:absolute; inset:0; z-index:90; }
.p4-face{ position:absolute; inset:0; z-index:85; }
.p4-ect{ position:absolute; inset:0; z-index:95; }

/* =====================
   CATEGORY ICONS
===================== */
.page6 .p4-category-icons{
  position:absolute;
  bottom:343px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:1000;
}

/* =====================
   CATEGORY BOX
===================== */
.page6 .p4-category-box{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translate(-50%, -33px);
  width:92%;
  height:300px;

  background:#fff;
  border-radius:30px;
  border:4px solid #FDBEED;
  box-shadow:0 0 0 4px #FFEDFA inset;
  overflow:hidden;
}

/* =====================
     PAGE5 CATEGORY GRID
===================== */

/* bag : 4 x 4 */
.page6 .p4-list.bag.show{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:32px 19px;
  justify-items:center;
}

/* case : 4 x 3 */
.page6 .p4-list.case.show{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:23px 18px;
  justify-items:center;
}

/* hat : 4 x 3 */
.page6 .p4-list.hat.show{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* face : 4 x 6 */
.page6 .p4-list.face.show{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* ect : 5 x 4 */
.page6 .p4-list.ect.show{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:30px 18px;
  justify-items:center;
}

/* =====================
   📌 Acc LAYER ORDER
===================== */

/* case */
.p4-case {
  position:absolute;
  inset:0;
  z-index: 100;
}

/* face */
.p4-face {
  position:absolute;
  inset:0;
  z-index: 95;
}

/* hat */
.p4-hat {
  position:absolute;
  inset:0;
  z-index: 90;
}

/* ect */
.p4-ect {
  position:absolute;
  inset:0;
  z-index: 85;
}

/* bag */
.p4-bag {
  position:absolute;
  inset:0;
  z-index: 80;
}

/* =================================================
   PAGE6 FACE / ECT 착용 시스템
================================================= */

/* 기본 숨김 상태 */
.p4-face img.face,
.p4-ect img.ect {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* 착용 시 표시 */
.p4-face img.face.show,
.p4-ect img.ect.show {
  opacity: 1;
}

/* =========================
   ECT 레이어 순서
========================= */

/* 손에 드는 애들이 제일 위 */
.p4-ect img[data-slot="hand-right"],
.p4-ect img[data-slot="hand-left"] {
  z-index: 50;
}

/* 몸에 착용하는 애들 */
.p4-ect img[data-slot="body"] {
  z-index: 20;
}

/* =================================================
   PAGE7 ONLY
================================================= */

.page7{
  position: relative;
}

/* =====================
   노트 영역 (page3 방식 그대로)
===================== */
/* 노트 영역이 좌표 기준 */
.page7 .p7-note-area{
  position: relative;   /* ⭐ 이게 핵심 */
  width: 348px;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index:1;
}

/* 노트 배경 (좌표 기준용) */
.page7 .p7-note-bg{
  width: 100%;
  display: block;
  pointer-events:none;
}

/* ⭐ 노트 위 좌표 캔버스 (핵심) */
.p7-note-content{
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  padding: 0;             
  box-sizing: border-box;

  pointer-events: auto;
  z-index:2;
}


/* =================================================
   날짜 (page3 스타일 그대로)
================================================= */

.page7 .p7-date {
  position: absolute;
  top: 25px;
  left: 40px;
  font-size: 17px;
  color: #ccc;
  font-family: 'SchoolSafetyStubbyChalk';
}


/* =================================================
   타이틀 (page3 스타일 그대로)
================================================= */

.page7 .p5-title {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-family: 'SchoolSafetyStubbyChalk';
  white-space: nowrap;
}

/* 이름 pill */
.page7 .p5-name-pill {
  display: inline-flex;
  align-items: center;

  padding: 4px 14px;
  background-color: #fff;
  border: 1.5px solid #FF6EB2;
  border-radius: 999px;
}

/* 이름 텍스트 */
.page7 .p5-name-text {
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

/* 의 오오티디 */
.page7 .p5-title-text {
  font-size: 27px;
  color: #FF6EB2;
  white-space: nowrap;
}


/* =================================================
   캐릭터 영역 (노트 좌표 기준)
================================================= */

.p7-character-area{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}


/* =================================================
   스티커 붙는 영역 (노트 좌표 기준)
================================================= */

.p7-sticker-area{
  position:absolute;
  inset:0;
  z-index:9.5;     /* 30 → 5 */
  pointer-events:auto;
}



/* =================================================
   실제 붙는 스티커
================================================= */

.p7-sticker{
  position:absolute;
  width:80px;
  height:80px;
  z-index:6;
  cursor:grab;
}

.p7-sticker img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  pointer-events:none;
}

.p7-sticker:active{
  cursor:grabbing;
}


/* =================================================
   체크 배경
================================================= */

.page7 .bg-check{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}


/* =================================================
   스티커 박스 (하단 패널)
================================================= */

.p7-sticker-box{
  position:absolute;
  left:0;
  bottom:0;
  width:375px;
  height:270px;
  background:#fff;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
  z-index:20;
  background:#fff;
  border-radius:30px;
  border:4px solid #FDBEED;
  box-shadow:0 0 0 4px #FFEDFA inset;

  padding:20px 20px 24px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;   
  align-items:center;  
  touch-action: manipulation;
}

/* 스티커 그리드 */
.p7-sticker-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
}

/* =====================
   스티커 썸네일 (배경/테두리 제거)
===================== */

.p7-sticker-item, .p7-sticker-item-big{
  width:100%;
  aspect-ratio:1/1;

  background: transparent;   /* 배경 제거 */
  border: none;              /* 테두리 제거 */
  border-radius: 0;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  padding:0;
}

/* 스티커 이미지 크기 조절 */
.p7-sticker-item img{
  width:65%;      /* ← 여기 숫자로 크기 조절 */
  height:65%;
  object-fit:contain;
  image-rendering:pixelated;
  pointer-events:none;
}

/* 크게 보일 스티커 */
.p7-sticker-item-big{
  width:90%;
  height:90%;
}

/* =====================
   스티커 그리드 정렬 보정
===================== */

/* 그리드 자체를 가운데 정렬 */
.p7-sticker-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 12px;   /* 가로 간격 */
  row-gap: -5px; 

  justify-items: center;   /* 가로 가운데 */
  align-items: center;    /* 세로 가운데 */
}

/* 각 버튼 셀도 가운데 정렬 */
.p7-sticker-item{
  width: 100%;
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 이미지도 정확히 가운데 */
.p7-sticker-item img{
  display: block;
  margin: auto;

  width: 70%;
  height: 70%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* 크게 보일 스티커 */
.p7-sticker-item.sticker-big img{
  width: 90%;
  height: 90%;
}
/* =====================
   PAGE7 스티커 박스 등장 애니메이션
===================== */

.p7-sticker-box{
  transform: translateY(100%);
  transition: transform 0.9s ease;
}

/* 등장 상태 */
.p7-sticker-box.show{
  transform: translateY(0);
}

/* PAGE7 날짜, 타이틀 레이어 고정 */
/* PAGE7 노트 텍스트 레이어 */
.page7 .p7-note-content{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
  pointer-events:auto;   /* ⭐ 버튼 클릭 가능 */
}

/* 날짜/타이틀만 클릭 막기 */
.page7 .p7-date,
.page7 .p7-date-line,
.page7 .p5-title{
  pointer-events:none;
}

/* 저장하기 버튼은 클릭 가능 */
.page7 .p7-save-btn{
  pointer-events:auto;
  position:absolute;
  top:22px;
  right:32px;

  background:none;
  border:none;
  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;
  color:#FF6EB2;
  cursor:pointer;
  z-index:9999;
}


/* 날짜 */
.page7 .p7-date{
  position:absolute;
  top:25px;
  left:40px;
  font-size:17px;
  color:#ccc;
  font-family:'SchoolSafetyStubbyChalk';
  z-index:11;
}


/* =====================
   PAGE7 캐릭터 그림자
===================== */

/* 노트 영역 */
.p7-note-area{
  position: relative;
  width: 348px;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index:1;
}

/* 노트 배경 */
.p7-note-bg{
  width:100%;
  display:block;
  position:relative;
  z-index:1;
}

/* 날짜 아래 실선 */
.page7 .p7-date-line{
  position: absolute;
  top: 52px;          /* 날짜 아래 위치 (미세조정 가능) */
  left: 40px;         /* 날짜 시작 X랑 맞춤 */
  width: 290px;       /* 노트 폭에 맞게 */
  height: 2px;

  background-color: #ddd;   /* 날짜랑 같은 톤 */
  border-radius: 1px;
}


/* 노트 위 좌표 캔버스 */
.p7-note-content{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:auto;
}

/* 캐릭터 */
.p7-character-area{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}

.p7-character-area .p7-character{
  position:absolute;
  top:-8px;
  left:-7px;
  width:375px;
  height:812px;
  transform: scale(0.9);
  transform-origin: top center;
}

/* 발밑 그림자 (노트 아래 레이어) */
.p7-character-shadow{
  position:absolute;
  top: 450px;     /* 발 위치 */
  left:52%;
  transform:translateX(-50%);
  width:120px;
  height:24px;
 background: #d7cbd1; 
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

/* =================================================
   ⭐ 스티커
================================================= */

.p7-sticker{
  position:absolute;
  cursor:grab;
  z-index:10;
}

.sticker-transform-wrap{
  position: relative;
  display: inline-block;   /* ⭐ 이미지 크기에 맞게 */
  transform-origin: center center;
}

.sticker-scale-wrap{
  position: relative;
  display: inline-block;
  transform-origin: center center;
}



/* 이미지 */
.sticker-img{
  width:90px;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* 테두리 */
.sticker-border{
  position:absolute;
  inset:-10px;
  border:2px dashed #FF6EB2;
  border-radius:14px;
  display:none;
  pointer-events:none;
}

/* 선택 시 */
.p7-sticker.selected .sticker-border{
  display:block;
}

/* 삭제 버튼 — 테두리 기준 */
.sticker-close{
  position:absolute;
  top:-18px;
  right:-18px;

  width:32px;
  height:32px;

  background:#FF6EB2;
  border-radius:50%;
  color:#fff;
  font-size:22px;
  font-weight:900;

  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* 선택 시 */
.p7-sticker.selected .sticker-close{
  display:flex;
}

/* 터치 영역 */
.sticker-close::after{
  content:"";
  position:absolute;
  inset:-20px;
}




/* =================================================
   ⭐ 스티커 컨트롤 패널 (유지)
================================================= */

.p7-sticker-panel{
  position:absolute;
  top:370px;
  right:30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:60;

  opacity:0;
  pointer-events:none;
  transition:0.2s;
}

.p7-sticker-panel.show{
  opacity:1;
  pointer-events:auto;
}

.panel-btn{
  width:37px;
  height:37px;
  border-radius:50%;
  border:2px solid #FF6EB2;
  background:#fff;
  color:#FF6EB2;

  position:relative;
  cursor:pointer;
}

/* 아이콘 */
.panel-btn span{
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%, -50%);

  font-size:30px;
  font-weight:800;
  line-height:1;
}

/* 회전 버튼 */
.panel-btn.btn-rotate span{
  font-size:32px;
  font-weight:900;

  text-shadow:
    0.8px 0 #FF6EB2,
   -0.8px 0 #FF6EB2,
    0 0.8px #FF6EB2,
    0 -0.8px #FF6EB2;

  top:42%;
  left:55%;
}

/* 회전 + 스케일 전용 래퍼 */
.sticker-transform{
  position: relative;
  display: inline-block;
  transform-origin: center center;
}

/* 저장하기 버튼 */
.p7-save-btn{
  position:absolute;
  top:22px;
  right:32px;

  background:none;
  border:none;
  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;
  color:#FF6EB2;
  cursor:pointer;

  z-index:9999;
  pointer-events:auto;
}


/* =====================
   PAGE8 NOTE (PAGE7과 동일)
===================== */

.page8{
  position:relative;
}

.p8-note-area{
  position:relative;
  width:348px;
  top:56px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}

.p8-note-bg{
  width:100%;
  display:block;
  pointer-events:none;
}

.p8-note-content{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

/* =================================================
   타이틀 (page3 스타일 그대로)
================================================= */

.page8 .p5-title {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-family: 'SchoolSafetyStubbyChalk';
  white-space: nowrap;
}

/* 이름 pill */
.page8 .p5-name-pill {
  display: inline-flex;
  align-items: center;

  padding: 4px 14px;
  background-color: #fff;
  border: 1.5px solid #FF6EB2;
  border-radius: 999px;
}

/* 이름 텍스트 */
.page8 .p5-name-text {
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
}

/* 의 오오티디 */
.page8 .p5-title-text {
  font-size: 27px;
  color: #FF6EB2;
  white-space: nowrap;
}

/* 날짜 */
.page8 .p8-date{
  position:absolute;
  top:25px;
  left:40px;
  font-size:17px;
  color:#ccc;
  font-family:'SchoolSafetyStubbyChalk';
}

/* 날짜 라인 */
.page8 .p8-date-line{
  position:absolute;
  top:52px;
  left:40px;
  width:290px;
  height:2px;
  background:#ddd;
  border-radius:1px;
}

/* 캐릭터 */
.p8-character-area{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

/* 스티커 결과 */
.p8-sticker-area{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;   /* 조작 불가 */
}

/* 저장 버튼 */
.p8-save-btn{
  position:absolute;
  top:22px;
  right:32px;

  background:none;
  border:none;

  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;
  color:#FF6EB2;

  cursor:pointer;
  pointer-events:auto;   /* ⭐ 이게 핵심 */
   z-index:999;
}

.p7-note-area{
  pointer-events:none;
}

.p7-sticker-area{
  pointer-events:auto;
}

.p7-save-btn{
  pointer-events:auto;
}

/* 홈 아이콘 */
.home-icon{
  width:29px;
  height:29px;
  stroke:#FF6EB2;
  stroke-width:2;
  fill:none;
  cursor:pointer;
  margin-left:4px;
}

/* 랜덤 문구 + 강아지 */
.p8-random-wrap{
  margin-top: 430px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.p8-dog{
  width:42px;
  image-rendering:pixelated;
}

.p8-random-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;
  text-align:center;
}

/* 고정 문구 */
.p8-fixed-text{
  margin-top:16px;
  font-family:'SchoolSafetyStubbyChalk';
  font-size:17px;
  text-align:center;
  line-height:1.6;
}

/* 저장 버튼 */
.p8-save-buttons{
  margin-top:28px;
  display:flex;
  justify-content:center;
  gap:16px;
}

.p8-save-btn-outline{
  padding:12px 22px;
  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;

  background:#fff;
  border-radius:14px;

  border:2px solid #FFB6DA;
  box-shadow:0 0 0 2px #FF6EB2 inset;

  cursor:pointer;
}

.p8-pencil{ position: absolute; width: 200px; top: 505px; left: -80px; }

/* =====================
   PAGE8 캐릭터 + 스티커 위치 조정
===================== */

.p8-character-area,
.p8-sticker-area{
  transform: translate(14px, 56px);  /* ← 여기 숫자만 조절 */
}

/* 발밑 그림자 (노트 아래 레이어) */
.p8-character-shadow{
  position:absolute;
  top: 450px;     /* 발 위치 */
  left:52.5%;
  transform:translateX(-50%);
  width:120px;
  height:24px;
 background: #d7cbd1; 
  border-radius:50%;
  z-index:2;
  pointer-events:none;
}

/* page8 기준 */
.page8 {
  position: relative;
}

/* page8 기준 */
.screen.page8{
  position: relative;
}

/* =====================
   PAGE8 문장 좌표 수동 배치 (최종)
===================== */

.screen.page8{
  position:relative;
}

/* 타이핑 레이어 */
.screen.page8 .typing-area{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}


/* 랜덤 문장 */
.screen.page8 .p8-random-line{
  position:absolute;
  top:550px;     /* ← 이 값 바꾸면 이동 */
  left:245px;     /* ← 이 값 바꾸면 이동 */

  display:flex;
  align-items:center;
  gap:6px;
}


/* 고정 문장 */
.screen.page8 .p8-fixed-group{
  position:absolute;
  top:580px;     /* ← 이 값 바꾸면 이동 */
  left:180px;     /* ← 이 값 바꾸면 이동 */
  width:300px;
}


/* 고정 문장 줄 */
.screen.page8 .p8-fixed-line{
  margin-top:10px;
}


/* 텍스트 */
.screen.page8 .typing-text{
  font-family:'SchoolSafetyStubbyChalk';
  font-size:16px;
  line-height:1.6;
  color:#666;
}

/* 랜덤 문장 색 */
.screen.page8 .p8-random-line .typing-text{
  font-size:18px;
  color:#000;
}

/* 강아지 */

.screen.page8 .typing-emoji{
  width:22px;
}

/* 랜덤 문장 폰트 */
.screen.page8 .p8-random-line .typing-text{
  font-size:22px;   /* ← 여기 */
}

/* 고정 문장 폰트 */
.screen.page8 .typing-text{
  font-size:19px;   /* ← 여기 */
  
}

.screen.page8 .typing-text{
  line-height:0.2;   /* ← 이게 행간 */
}
.screen.page8 .p8-fixed-line{
  margin-top:6px;   /* ← 줄 사이 간격 */
}

#homeBtn{
  position:absolute;
  top:75px;
  right:32px;

  width:29px;
  height:29px;

  stroke:#FF6EB2;
  stroke-width:2;
  fill:none;

  cursor:pointer;
  z-index:999999;   /* 최상단 */
  pointer-events:auto;
}

.p8-note-area,
.p8-character-area,
.p8-sticker-area,
.typing-area{
  pointer-events:none;
}

/* =====================
   PAGE8 저장 버튼 영역
===================== */

.p8-save-buttons{
  position:absolute;
  bottom:80px;                 /* 노트 하단 위치 */
  left:53%;
  transform:translateX(-50%);

  display:flex;
  gap:10px;                   /* 버튼 사이 간격 */
  z-index:9999;
}


/* =====================
   저장 버튼 공통 스타일
===================== */

.p8-save-btn-outline{
  /* 기본 스타일 제거 */
  border:none;
  outline:none;
  background:none;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;

  /* 🔥 박스 크기 고정 */
  width:135px;          /* ← 여기 숫자로 가로 크기 조절 */
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  /* 텍스트 */
  font-family:'SchoolSafetyStubbyChalk';
  font-size:18px;
  white-space:nowrap;
  color:#000;
  border:2px solid #000;
  /* 디자인 */
  background:#fff;
  border-radius:18px;

  border:2px solid #FDBEED;
  box-shadow:0 0 0 2px #FFEDFA inset;     

  cursor:pointer;
}

/* 눌렀을 때 효과 */
.p8-save-btn-outline:active{
  transform:scale(0.96);
}

/* 포커스/선택 파란 테두리 제거 */
.p8-save-btn-outline:focus,
.p8-save-btn-outline:active{
  outline:none;
  color:#000;
}

/* 저장용 안전 영역 */
.capture-mode .typing-area {
  overflow: visible !important;
}

.capture-mode .typing-emoji {
  max-width: 48px;
  max-height: 48px;
}
/* 캡쳐용 워터마크 로고 */
#captureLogo{
  position: absolute;
  right: 30px;
  bottom: 60px;

  width: 150px;
  height: auto;

  opacity: 0.5;
  pointer-events: none;
  display: none;

  z-index: 200;
}