:root{
  
  --bg:#0B0B0C; --surface:#161618; --surface-hi:rgba(237,234,227,.06);
  --border:rgba(237,234,227,.10); --border-hair:rgba(237,234,227,.06);
  --text:#EDEAE3;                  
  --text-2:rgba(237,234,227,.55);  
  


  --text-3:rgba(237,234,227,.50);  
  

  --text-4:rgba(237,234,227,.35);  

  




  --wood:#3FBE84; --fire:#E05A4B; --earth:#DBA53C; --metal:#EDEAE3; --water:#7887A4;

  


  --success:#3FBE84; --danger:#E05A4B;
  --disabled-bg:rgba(237,234,227,.12); --disabled-fg:rgba(237,234,227,.35);
  



  --focus-ring:#EDEAE3;

  




  --ink:var(--text); --soft:var(--text-2); --line:var(--border);

  


  --kr:'Gyeok Display','Jojak',"Apple SD Gothic Neo",sans-serif;
  --ui:'Jojak',"Apple SD Gothic Neo",system-ui,sans-serif;
  --han:'Ganji',"Apple SD Gothic Neo",monospace;

  


  --pad-screen:22px;      
  --pad-input:26px;       
  --gap-sec-s:22px; --gap-sec-m:26px; --gap-sec-l:34px;   
  --gap-1:6px; --gap-2:8px; --gap-3:10px; --gap-4:14px;   
  --r-sm:6px;             
  --r-md:10px;            
  --r-lg:14px;            
  --r-pill:999px;         
  --r-grid:4px;           
  

  --top-start:max(56px, calc(env(safe-area-inset-top) + 12px));
  





  --top-first:var(--top-start);
  --tabbar:86px;          

  















  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;

  













  --t1:11.5px; --t2:13px; --t3:14px; --t4:16px; --t5:21px; --t6:28px;
  

}






@media (display-mode: browser){
  :root{--top-first:var(--gap-sec-l);}
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  

  font-family:var(--ui);
  line-height:1.6; -webkit-text-size-adjust:100%;
}


html{color-scheme:dark; background:var(--bg);}




html, body, input, select, textarea, button{
  word-break: keep-all;
  overflow-wrap: anywhere;
}
a{color:inherit;}














.top h1, .headline, legend,
.sec > summary b, .sec .narration, .narration.lead{
  font-family:var(--kr);
  letter-spacing:-.005em;
}






.top h1, .headline, legend, .sec > summary b,
.sec .narration, .narration.lead{word-spacing:-.2em;}
.sec > summary b{font-weight:400;}





body.framed{background:transparent;}
body.framed .bar{background:rgba(11,11,12,.86);}


body.framed .top .back,
body.framed .top .my{display:none;}
body.framed .wrap{padding-bottom:88px;}




body:has(#emptyNote) .bar{display:none;}
body.framed:has(#emptyNote) .wrap{padding-bottom:24px;}



.wrap{max-width:400px; margin:0 auto; padding:20px 20px 104px;}




.top{display:flex; align-items:center; gap:10px; padding:var(--top-first) 20px 0; max-width:400px; margin:0 auto;}

.top .back{font-size:var(--t5); text-decoration:none; color:var(--soft); line-height:1;
  display:flex; align-items:center; min-height:44px;}
.top h1{font-size:var(--t5); margin:0; flex:1;}

.top:has(h1:empty){display:none;}
.top .my{font-size:var(--t2); color:var(--soft); text-decoration:none;}


fieldset{border:1px solid var(--line); border-radius:14px; padding:var(--s4) 16px; margin:0 0 var(--s4);}
legend{padding:0 8px; font-weight:700; font-size:var(--t3);}
legend .opt{font-weight:400; color:var(--soft); font-size:var(--t3);}
.row{display:flex; gap:var(--s3); margin-bottom:var(--s3);}
.row:last-child{margin-bottom:0;}
.row > *{flex:1; min-width:0;}
fieldset > div + .row{margin-top:var(--s3);}
label{display:block; font-size:var(--t2); color:var(--soft); margin:var(--s3) 0 var(--s1);}

input,select,textarea{
  width:100%; padding:11px 12px; font-size:var(--t4); color:var(--text);
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  font-family:inherit;
}





::placeholder{font-size:14px; color:var(--text-4);}

select{
  -webkit-appearance:none; appearance:none; padding-right:30px; font-weight:600;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
}


input:focus,select:focus,textarea:focus{outline:none; border-color:var(--focus-ring);}
.hint{font-size:var(--t2); color:var(--soft); margin:var(--s3) 0 0;}



.seg{display:flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface);}
.seg input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.seg label{
  flex:1; margin:0; padding:0 4px; min-height:44px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  
  font-size:14px; font-weight:500; color:var(--soft); cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition:background .15s ease, color .15s ease;
}
.seg label + input + label{border-left:1px solid var(--line);}


.seg input:checked + label{background:var(--text); color:var(--bg); font-weight:600;}
.seg input:focus-visible + label{outline:none; box-shadow:inset 0 0 0 1px var(--focus-ring);}


.off{opacity:.45;}
.off input, .off .dial{background:var(--disabled-bg);}



.dial{
  -webkit-appearance:none; appearance:none;
  padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

.dial:has(option[value=""]:checked){color:var(--soft);}





.pick{
  margin-bottom:var(--s4); padding:var(--s4) 16px var(--s3);
  border:1px solid var(--border); border-radius:16px; background:var(--surface);
}


.pick > form{margin-top:var(--s3); padding-top:var(--s4); border-top:1px solid var(--line);}
.pick > form fieldset{border:0; padding:0; margin:0;}














button, .btn, .seg label, details summary, .top .back, .top .my{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button:active, .btn:active,
.seg label:active, details summary:active, .top .back:active, .top .my:active{
  background-color:var(--surface-hi);
  transition-duration:0s;      
}













.btn:not(.ghost):active{background-color:rgba(237,234,227,.80);}





.sec > summary{-webkit-tap-highlight-color:transparent;}




button[disabled]:active, .btn[disabled]:active{background-color:var(--disabled-bg);}










button,.btn{
  display:block; width:100%; padding:18px 16px; line-height:1.2;
  font-size:15px; font-weight:600; font-family:var(--ui);
  text-align:center; text-decoration:none;
  color:var(--bg); background:var(--text); border:0; border-radius:10px; cursor:pointer;
}


button[disabled]{opacity:1; background:var(--disabled-bg); color:var(--disabled-fg); cursor:progress;}


.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(237,234,227,.2); padding:17px 16px;}


.btn.ghost:active{background-color:var(--surface-hi);}


.btn.small{padding:14px 12px; font-size:14px;}



.btn.subscribe{border-radius:999px; background:var(--earth); color:var(--bg);}
.bar{position:fixed; left:0; right:0; bottom:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom));
     background:rgba(11,11,12,.94); border-top:1px solid var(--border-hair);}
.bar > div{max-width:400px; margin:0 auto;}


.card{border:1px solid var(--line); border-radius:14px; padding:var(--s4); margin-bottom:var(--s4);}
.card.tint{background:var(--surface); border-color:transparent;}
.card.err{border-color:var(--danger); background:rgba(224,90,75,.10);}
.headline{font-size:var(--t5); font-weight:700; margin:0 0 var(--s3); line-height:1.45;}


.narration p{margin:0 0 var(--s3); white-space:pre-wrap; text-wrap:pretty;}
.narration p:last-child{margin-bottom:0;}
.basis{font-size:var(--t3); color:var(--soft); margin:6px 0;}
.meta{font-size:var(--t1); color:var(--soft); margin-top:12px;}

details summary{cursor:pointer; font-size:var(--t3); color:var(--soft);}
.empty{color:var(--soft); font-size:var(--t3); text-align:center; padding:28px 0;}
.kv .k{color:var(--soft); flex:none;}
.kv .v{text-align:right; font-weight:600;}



i, em{font-style:normal;}
.item .t{font-size:var(--t3);}
.item .d{font-size:var(--t1); color:var(--soft);}


.who{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.who > span{flex:none; font-size:var(--t1); color:var(--soft);}
.who .dial{padding:8px 26px 8px 10px; font-size:var(--t3); font-weight:700;}





.invite{padding-top:18px;}




.invite-cap{margin:0 0 var(--s3); font-size:var(--t2); color:var(--soft); display:flex; align-items:center; gap:6px;}
.invite-head{margin:0 0 var(--s4); font-size:var(--t4); font-weight:700; line-height:1.5;}
.invite-list{margin:0 0 var(--s4); padding:0; list-style:none;}
.invite-list li{
  position:relative; padding:0 0 0 16px; margin-bottom:var(--s3);
  font-size:var(--t3); line-height:1.6; color:var(--soft);
}
.invite-list li::before{
  content:''; position:absolute; left:2px; top:.6em;
  width:5px; height:5px; border-radius:50%; background:var(--earth);
}
.invite-list b{color:var(--text);}


.prow{
  display:flex; align-items:center; gap:var(--s2); width:100%; text-align:left;
  
  min-height:56px; padding:var(--s2) 0; border:0; border-bottom:1px solid var(--line);
  background:none; font:inherit; color:inherit;
}
.prow:last-of-type{border-bottom:0;}

.pname{flex:none; font-size:var(--t3); font-weight:700;}
.pbirth{
  flex:1; min-width:0; font-size:var(--t1); color:var(--soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}


.tag{
  display:inline-block; font-size:var(--t1); font-weight:700; padding:2px 8px;
  border-radius:999px; margin-right:4px; vertical-align:2px; white-space:nowrap;
}


.tag.rel{background:var(--surface-hi); color:var(--text-2);}



.tag.done{background:rgba(63,190,132,.15); color:var(--wood);}
.tag.todo{background:rgba(224,90,75,.15); color:#EE8175;}
.prow-go{
  flex:none; display:flex; align-items:center; min-height:44px; padding:0 var(--s2);
  font-size:var(--t2); color:var(--soft); text-decoration:none;
}


.sec{border-bottom:1px solid var(--line); padding:var(--s1) 0;}
.sec:last-of-type{border-bottom:0;}
.sec > summary{
  display:flex; align-items:flex-start; gap:var(--s3); list-style:none;
  

  position:relative; padding:var(--s4) 18px var(--s4) 0; cursor:pointer;
}
.sec > summary::-webkit-details-marker{display:none;}
.sec > summary b{font-size:var(--t4); font-weight:700; line-height:1.5; letter-spacing:-.01em;}



















.sec > summary::after{
  content:''; position:absolute; right:0; top:50%;
  width:13px; height:1.8px; margin-top:-.9px; border-radius:1px;
  background:var(--earth);
  transition:background .15s ease;
}
.sec > summary::before{
  content:''; position:absolute; right:5.6px; top:50%;
  width:1.8px; height:13px; margin-top:-6.5px; border-radius:1px;
  background:var(--earth);
  transition:opacity .15s ease, transform .15s ease;
}

.sec[open] > summary::before{opacity:0; transform:scaleY(.3);}
.sec[open] > summary::after{background:var(--text-4);}



@media (prefers-reduced-motion:reduce){
  .sec > summary::after, .sec > summary::before{transition:none;}
}
.sec .narration{padding:0 var(--s1) var(--s4);}
.sec .narration p{margin:0 0 var(--s3);}







.narration.lead{margin-bottom:6px;}

.share{display:flex; gap:8px; margin:2px 0 12px;}
.share .btn{flex:1;}
.share-note{font-size:var(--t1); color:var(--soft); text-align:center; margin:0 0 12px;}


.ms-col.is-none .ms-head{color:var(--text-4);}

.ms-none{
  display:flex; align-items:center; justify-content:center; min-height:104px;
  font-size:var(--t1); line-height:1.5; color:var(--text-4); text-align:center;
  border:1px dashed var(--border); border-radius:12px; margin:2px 0;
}


















.nyang-mark{ display:inline-flex; flex:none; width:1em; height:1em; vertical-align:-.14em; }
.nyang-mark img, .nyang-mark svg{ width:100%; height:100%; display:block; }
.nyang-mark .mono{ display:none; color:inherit; }
@media print, (forced-colors: active), (monochrome){
  .nyang-mark img{ display:none; }
  .nyang-mark .mono{ display:block; }
}












a[x-apple-data-detectors],
a[x-apple-data-detectors] *{
  color:inherit !important;
  text-decoration:none !important;
  -webkit-text-decoration-color:inherit !important;
  pointer-events:none;          
}