:root{ --ink:#4a3a30; --paper:#fbf6ee; --grid:#ece1d0; --c-card:#f8d6e6; --t-card:#efb6d2; --accent:#ff8fb0; --accent-deep:#e36f95; }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Gaegu',system-ui,sans-serif;color:var(--ink);background-color:var(--paper);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:28px 28px;-webkit-font-smoothing:antialiased;padding:0 22px 70px;line-height:1.45;min-height:100vh;}
  .diary{max-width:940px;margin:0 auto;}

  /* 인트로 로딩 오버레이 + 콘텐츠 등장 */
  html:not(.embed){scrollbar-gutter:stable;}
  html.embed #page-loader{display:none!important;}
  html.embed .diary{opacity:1!important;animation:none!important;}
  #page-loader{position:fixed;inset:0;z-index:9999;background-color:var(--paper);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:400px;gap:18px;transition:opacity .5s ease;}
  #page-loader.hide{opacity:0;pointer-events:none;}
  .pl-img{height:210px;width:auto;animation:plPop 1s ease-in-out infinite;filter:drop-shadow(0 5px 7px rgba(74,58,48,.16));}
  .pl-dots{display:flex;gap:9px;}
  .pl-dots span{width:11px;height:11px;border-radius:50%;background:var(--accent);display:block;animation:plDot .85s ease-in-out infinite;}
  .pl-dots span:nth-child(2){animation-delay:.14s;} .pl-dots span:nth-child(3){animation-delay:.28s;}
  @keyframes plPop{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-13px) scale(1.08);}}
  @keyframes plDot{0%,100%{opacity:.35;transform:translateY(0);}50%{opacity:1;transform:translateY(-7px);}}
  .diary{opacity:0;}
  body.ready .diary{opacity:1;animation:pageReveal .72s cubic-bezier(.18,.72,.28,1);}
  @keyframes pageReveal{from{opacity:0;transform:translateY(30px) scale(.978);}to{opacity:1;transform:translateY(0) scale(1);}}

  nav.tabs{display:flex;justify-content:center;gap:8px;padding:20px 0 8px;position:sticky;top:0;z-index:30;background:transparent;}
  nav.tabs a{font-weight:700;font-size:1.68rem;text-decoration:none;color:var(--ink);padding:6px 26px 8px;border:2.4px solid var(--ink);border-radius:16px;background:#fff;box-shadow:3px 3px 0 rgba(74,58,48,.16);transform:rotate(-1.5deg);transition:transform .15s;}
  nav.tabs a:nth-child(2){transform:rotate(1deg);} nav.tabs a:nth-child(3){transform:rotate(-.5deg);} nav.tabs a:nth-child(4){transform:rotate(.7deg);}
  nav.tabs a:hover{transform:translateY(-2px) rotate(0);}
  nav.tabs a.active{background:var(--t-card);}

  header.hero{margin:10px 4px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  .hero .title{font-weight:700;font-size:3rem;line-height:1;margin:0;}
  .hero .sub{font-size:1.3rem;opacity:.6;margin-top:4px;}
  .hero-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .song-count-badge{font-size:1.15rem;color:var(--accent-deep);background:#fff;border:2.4px solid var(--accent);padding:3px 14px;border-radius:15px;font-weight:700;white-space:nowrap;}
  .rand-btn{font-family:inherit;font-weight:700;font-size:1.12rem;cursor:pointer;color:#fff;background:var(--accent);border:2.4px solid var(--ink);padding:4px 16px 6px;border-radius:15px;box-shadow:2px 2px 0 rgba(74,58,48,.16);transition:transform .15s;}
  .rand-btn:hover{transform:translateY(-2px);}

  .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
  .search-wrap{position:relative;flex:1;min-width:220px;}
  .song-search-input{width:100%;padding:12px 16px 12px 44px;border-radius:16px;border:2.6px solid var(--ink);background:#fff;font-family:inherit;font-size:1.2rem;color:var(--ink);outline:none;box-shadow:3px 3px 0 rgba(74,58,48,.12);}
  .song-search-input::placeholder{color:#4a3a3066;}
  .search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:1.1rem;pointer-events:none;}
  .song-filter-tabs{display:flex;gap:7px;flex-wrap:wrap;}
  .filter-tab{font-family:inherit;font-size:1.08rem;font-weight:700;padding:5px 16px 7px;border-radius:14px;border:2.4px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:transform .12s;box-shadow:2px 2px 0 rgba(74,58,48,.12);}
  .filter-tab:hover{transform:translateY(-1px);}
  .filter-tab.active{background:var(--accent);color:#fff;}

  .table-box{position:relative;border-radius:20px;background:#fff;box-shadow:6px 7px 0 rgba(74,58,48,.13);overflow:hidden;}
  .table-box::before{content:'';position:absolute;inset:0;border:2.6px solid var(--ink);border-radius:20px;pointer-events:none;z-index:3;}
  table{width:100%;border-collapse:collapse;font-size:1.18rem;position:relative;z-index:2;}
  thead{background:var(--c-card);}
  thead th{padding:13px 16px;text-align:left;font-size:1.05rem;font-weight:700;color:var(--ink);}
  thead th.center{text-align:center;}
  tbody tr{border-top:2px dashed #4a3a3030;transition:background .15s;}
  tbody tr:hover{background:#fdf0f6;}
  tbody td{padding:12px 16px;color:var(--ink);vertical-align:middle;}
  tbody td.center{text-align:center;}
  .artist-cell{font-weight:700;color:#4a3a3099;font-size:1.08rem;}
  .title-cell{font-weight:700;}
  .memo-cell{font-size:1rem;color:#4a3a3088;}
  .stars{display:inline-flex;gap:2px;}
  .star{font-size:1.15rem;} .star-on{color:var(--accent);} .star-off{color:#e3d6c8;}
  .genre-badge{font-size:.95rem;padding:2px 11px;border-radius:14px;font-weight:700;display:inline-block;border:1.5px solid var(--ink);}
  .genre-kpop{background:#fbe0ec;} .genre-jpop{background:#fbe9cf;} .genre-pop{background:#e6def5;}
  .genre-etc{background:#efe5d8;}
  .copy-btn{font-family:inherit;background:#fff;border:2px solid var(--ink);border-radius:11px;padding:4px 12px;font-size:1rem;font-weight:700;color:var(--ink);cursor:pointer;transition:transform .12s;white-space:nowrap;}
  .copy-btn:hover{transform:translateY(-1px);}
  .copy-btn.copied{background:var(--accent);color:#fff;}

  .state-box{text-align:center;padding:60px 20px;position:relative;z-index:2;}
  .spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--c-card);border-top-color:var(--accent);animation:spin .8s linear infinite;margin:0 auto 16px;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .state-text{font-size:1.2rem;color:#4a3a3099;} .state-emoji{font-size:2.4rem;margin-bottom:10px;}

  .song-pagination{display:flex;align-items:center;justify-content:center;gap:5px;padding:24px 0 8px;flex-wrap:wrap;}
  .page-btn{min-width:38px;height:38px;padding:0 8px;border-radius:11px;border:2.2px solid var(--ink);background:#fff;color:var(--ink);font-family:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .12s;display:flex;align-items:center;justify-content:center;}
  .page-btn:hover{transform:translateY(-1px);}
  .page-btn.active{background:var(--accent);color:#fff;}
  .page-btn:disabled{opacity:.35;cursor:default;pointer-events:none;}

  footer{margin:44px 4px 0;text-align:center;font-size:1.15rem;opacity:.55;}
  body.embed nav.tabs{display:none;}
  @media (max-width:600px){.memo-cell{display:none;}.hero .title{font-size:2.4rem;}}

#view-song .diary{opacity:1!important;animation:none!important} #view-song #page-loader{display:none!important}