@charset "utf-8";
 *{
	 margin:0px;
	 padding:0px;
 }
 
 a
 {
	 color:inherit;
	 text-decoration:none;
 }
  
body {

    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background: radial-gradient(circle at center, #2c3e50 0%, #000 80%);
    font-family: 'Georgia', serif;
    color:#fff;
    overflow:hidden;
 }

  /* ===== ECG 심장박동 배경 ===== */
  .ecg_line {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 120px;
    transform: translateY(-50%);
    z-index: 0; /* 편지 뒤 */
    overflow: hidden;
  }

  .ecg_line svg {
    width: 200%;
    height: 100%;
    stroke: #00ff88;
    stroke-width: 2;
    fill: none;
    animation: moveECG 7s linear infinite;
    filter: drop-shadow(0 0 6px #00ff88);
  }

  @keyframes moveECG {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  
  /* ECG 위 텍스트 */
.ecg_text {
  position: fixed;
  top: 32%;
  left: 100%; /* 처음엔 화면 오른쪽 바깥에서 시작 */
  white-space: nowrap;
  font-size: 1.8rem;
  color: #00ff88;
  text-shadow: 0 0 8px #00ff88;
  transform: translateY(-50%);
  animation: none; /* JS가 animation 대신 transition 제어 */
}

@keyframes moveText {
  from { transform: translate(10%, -50%); }
  to   { transform: translate(-800%, -50%); }
}

  /* ===== 봉투 ===== */
  .envelope {
    width:600px;
    height:400px;
    position:relative;
    perspective:1000px;
    cursor:pointer;
    animation: float 3s ease-in-out infinite;
    z-index: 10; /* ECG 위에 나오도록 */
	color:#3d4b2d;
	text-align:center;
  }

  .front, .back {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    backface-visibility:hidden;
    transition: transform 1s ease;
    border-radius: 4px;
    box-shadow:0 4px 20px rgba(255,255,255,0.2);
  }

  .front {
	background: radial-gradient(#b6a49a 40%, #8b8476 100%);
	box-shadow: 2px 5px 15px rgb(87 46 3 / 60%);

    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:1.5rem;
  }
  
  .front_text
  {
	font-size:2rem;
	position: relative;
    padding: 10px 0px;
  }

  .back {
    background-color:#b2a197;
    transform:rotateY(-180deg);
    z-index:1;
    position:relative;
  }

.front_show
{
	position:relative;
}

  .front_show .date_text {
	position:relative;
	padding:10px 0px;
    font-size:1.8rem;
  }

  .flap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color:#3d4a2d;
    transform-origin:top center;
    transition: transform 1s ease 0.5s;
    z-index:2;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  }

  .flap>div {
    width:95%;
    height:95%;
    margin:auto;
    position:absolute;
    top:0; 
	left:0; 
	right:0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background-color:#b2a197;
  }
  
  .bottom_tool 
  {   
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:50%;
	background-color:#3d4a2d;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 15; 
  } 
  
 .bottom_tool>div 
 { 
    width:98%;
    height:95%;
    margin:auto;
    position:absolute;
    bottom:0; 
	left:0; 
	right:0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background-color:#b2a197;
  } 

  .left_tool 
  { 
    position:absolute;
    top:0%;
    left:0;
    width:50%;
    height:100%;
	background-color:#3d4a2d;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 15; 
  } 
  
  .left_tool > div
  {
    width:95%;
    height:97%;
    margin:auto;
    position:absolute;
    bottom:0px; 
	left:0; 
	top:0px;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    background-color:#b2a197;	  
  }
  
  
  .right_tool
  { 
    position:absolute;
    top:0%;
    right:0;
    width:50%;
    height:100%;
	background-color:#3d4a2d;
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    z-index: 15; 
  }
  
  .right_tool > div
  {
		width:95%;
		height:97%;
		margin:auto;
		position:absolute;
		bottom:0px; 
		right:0; 
		top:0px;
		clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
		background-color:#b2a197;	  
  }

  .letter {
    position:absolute;
    top:0px;
    left:10px;
    width:580px;
    height:380px;
    background:#fffdf8;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    text-align:center;
    font-weight:bold;
    color:#333;
    transition: top 1s ease 1.5s, opacity 1s ease 1.5s;
    opacity:0;
    z-index:3;
	display:flex;
	justify-content: center;
    flex-direction: column;
  }
  
  .letter > div
{
	position:relative;
	padding:15px 0px;
	font-size:1.3rem;
  }

  .flash {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:white;
    opacity:0;
    pointer-events:none;
    transition:opacity 1s ease;
    z-index:999;
  }

  .flash.active { opacity:1; }

  .envelope.open .front { transform:rotateY(180deg); }
  .envelope.open .back { transform:rotateY(0deg); }
  .envelope.open .flap { transform:rotateX(180deg); }
  .envelope.open .letter { top:-150px; opacity:1; }

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