:root{
  --paper:#F4F0E6;--raised:#FAF7F0;--ink:#252821;--moss:#66705A;
  --tea:#806B4F;--time:#D7C88C;--rule:#C8C0AE;--dim:#5E5F58;--faint:#A29A88;
  --accent:var(--moss);--mx:50%;--my:40%;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--paper);position:relative;color:var(--ink);font-family:'Noto Serif KR','Apple SD Gothic Neo','Nanum Myeongjo',Georgia,serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(620px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 11%,transparent) 0%,color-mix(in srgb,var(--accent) 4%,transparent) 42%,transparent 68%);transition:background .45s ease-out}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}input,textarea{font:inherit;color:inherit}.is-hidden{display:none!important}.tnum{font-variant-numeric:tabular-nums}.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{background:var(--raised);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top)}
.hd{max-width:1080px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:19px;font-weight:700;letter-spacing:.02em}.logo span{color:var(--tea);font-weight:500}nav{display:flex;align-items:center;gap:30px;font-size:15px;color:var(--tea)}nav a{color:inherit;text-decoration:none;padding:10px 0 3px;border-bottom:2px solid transparent}nav a.on{color:var(--moss);font-weight:600;border-bottom-color:var(--moss)}.who{font-size:14px;color:var(--tea);display:flex;align-items:center;gap:7px;transition:color .15s}.who::after{content:'';width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);background:var(--paper);flex-shrink:0}.who:hover{color:var(--ink)}.who.on{color:var(--moss);font-weight:600}.who.on::after{border-color:var(--moss);background:var(--moss)}.who.has-avatar::after{background:var(--avatar) center/cover no-repeat,var(--paper)}.who.on.has-avatar::after{background:var(--avatar) center/cover no-repeat,var(--paper);border-color:var(--moss)}
h1{font-size:34px;font-weight:700;margin:0;line-height:1.3}h2{font-size:20px;font-weight:600;margin:0}.sub{font-size:16px;color:var(--tea);margin-top:5px}.rule{height:1px;background:var(--rule)}.muted{color:var(--dim)}.faint{color:var(--faint)}.small{font-size:13px;color:var(--tea)}main{padding:30px 0 90px;min-height:calc(100vh - 68px)}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--accent);color:var(--raised);font-size:17px;font-weight:600;text-decoration:none;transition:opacity .15s}.btn:hover{opacity:.88}.btn2{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border:1px solid var(--rule);font-size:16px}.btn2:hover{background:var(--raised)}.btnwide{width:100%}.link{color:var(--moss);font-weight:600;text-decoration:underline;text-underline-offset:3px}.link:hover{color:var(--ink)}
.tag{font-size:12px;padding:3px 9px;font-weight:500}.field{width:100%;height:46px;border:1px solid var(--rule);background:var(--raised);padding:0 13px;font-size:15px;border-radius:0}.field:focus{outline:2px solid var(--accent);outline-offset:-2px}textarea.round-edit{height:64px}textarea.field{height:84px;padding:12px 13px;resize:none;line-height:1.7}.space-head{height:26px}.space-rule{height:20px}.space-small{height:10px}.space-button{height:18px}.space-top{margin-top:16px;display:flex;justify-content:center}
.shelfhead{display:flex;align-items:baseline;gap:11px;margin-bottom:12px}.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:4px solid var(--accent);opacity:0;transform:translateY(6px);transition:opacity .24s ease,transform .24s ease}.shelf.in{opacity:1;transform:none}.jar{padding:16px 12px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;border-right:1px solid var(--rule);transition:background .15s;min-width:0}.jar:nth-child(5n),.jar:last-child{border-right:none}.jar:nth-child(n+6){border-top:1px solid var(--rule)}.jar:hover{background:var(--raised)}.sil{width:62px;height:68px;border:1.5px solid var(--accent);border-radius:5px 5px 12px 12px;position:relative}.sil::before{content:'';position:absolute;top:-6px;left:12px;right:12px;height:6px;background:var(--accent);border-radius:2px 2px 0 0}.jname{font-size:17px;font-weight:500;text-align:center;overflow-wrap:anywhere}.jfn{font-size:12px;color:var(--tea);text-align:center;line-height:1.45;overflow-wrap:anywhere}
.two{display:flex;gap:44px;align-items:flex-start}.col{flex:1;min-width:0}.side{width:360px;flex-shrink:0;background:var(--paper);border:1px solid var(--rule);padding:24px}.kv{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);gap:14px}.kv:last-child{border-bottom:none}.kvL{font-size:14px;color:var(--tea)}.kvV{font-size:18px;text-align:right}.tea-heading{display:flex;gap:8px;align-items:baseline;margin-bottom:9px}.brandline{margin-top:8px}.teafacts{width:100%;border-collapse:collapse;margin:20px 0}.teafacts th{width:96px;text-align:left;font-weight:400;font-size:14px;color:var(--tea);padding:12px 0;border-bottom:1px solid var(--rule);vertical-align:top}.teafacts td{font-size:15px;padding:12px 0;border-bottom:1px solid var(--rule);line-height:1.6}.teafacts tr:last-child th,.teafacts tr:last-child td{border-bottom:none}.back-button{margin-bottom:20px}.formrows{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formrows label{font-size:13px;color:var(--tea)}.formrows .field{display:block;margin-top:7px;color:var(--ink)}.selected-tea{display:flex;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.selected-copy{display:flex;flex:1;min-width:0;flex-direction:column}.selected-copy strong{font-size:24px}.change-tea{margin-left:auto;height:44px;min-height:44px}.vessel-section{margin-top:26px}.vessel-section h2{margin-bottom:10px}.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.vbtn{border:1px solid var(--rule);padding:13px 10px;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;transition:all .15s}.vbtn:hover{background:var(--raised)}.vbtn.on{border-color:var(--accent);border-width:2px;background:var(--raised)}.vname{font-size:15px;font-weight:600}.vhint{font-size:11px;color:var(--tea);line-height:1.35}.vml{font-size:12px;color:var(--dim)}.brew-values{margin-top:26px}
.tmhead{text-align:center;margin-bottom:18px}.tmname{font-size:30px;font-weight:600;margin:4px 0 10px}.round-chip{min-height:30px}.tmlayout{display:flex;align-items:flex-start;justify-content:center;gap:44px;flex-wrap:wrap}.tmstage{--stage:300px;position:relative;width:var(--stage);height:var(--stage);flex-shrink:0;background:none;border:none;cursor:pointer;border-radius:50%}.tmstage svg{display:block}.tmstage:focus-visible{outline:2px solid var(--accent);outline-offset:8px}.tminner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none}.tmfill{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}.tminner-fill{color:var(--paper);position:absolute;left:0;right:0;bottom:0;top:auto;height:var(--stage)}.tminner-fill .tmv,.tminner-fill .tmstate{color:var(--paper)}.tmv{font-size:64px;font-weight:500;letter-spacing:-.02em;line-height:1}.tmstate{font-size:14px;opacity:.72}.water{will-change:transform;transition:transform .12s linear}.wv{animation:wave 7s linear infinite}.wv2{animation-duration:4.4s;animation-direction:reverse}@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-160px)}}.condrow{display:flex;justify-content:center;gap:34px;padding:18px 0;margin:26px auto 0;max-width:700px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap}.cond{text-align:center}.condv{font-size:19px}.lab{font-size:12px;color:var(--tea)}.tmbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}.recbox{display:flex;flex-direction:column;gap:18px;max-width:640px;margin:26px auto 0}.recbox label{display:flex;flex-direction:column;gap:8px}.tmhistory{width:280px;flex-shrink:0;border-left:1px solid var(--rule);padding-left:22px;display:flex;flex-direction:column;gap:14px}.hrow{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--rule)}.hrow:last-child{border-bottom:none;padding-bottom:0}.hnum{font-size:15px;font-weight:600}.hhint{font-size:13px;color:var(--tea);line-height:1.5}.hnote{font-size:14px;line-height:1.6}
.nrow{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:flex-start}.nrow:last-child{border-bottom:none}.nn{width:100px;flex-shrink:0}.round-title{font-size:16px;font-weight:600}.note-copy{flex:1;min-width:0;font-size:15px}.overall-note{font-size:16px;line-height:1.8;white-space:pre-wrap}.btnrow-center,.note-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.note-actions{margin-top:48px}.note-actions .btn,.note-actions .btn2,.account-actions .btn2{min-width:150px}.notes-private{margin:4px 0 12px}.note-row{width:100%;text-align:left}.lrow{display:flex;gap:26px;padding:18px;border-bottom:1px solid var(--rule);align-items:flex-start;cursor:pointer}.lrow:hover{background:var(--raised)}.ldate{width:160px;flex-shrink:0}.ldate span{display:block}.val{font-size:14px}.note-main{flex:1}.note-main>span{display:block}.note-name{font-size:18px;font-weight:600}.note-view{flex-shrink:0}.note-category{display:inline-block;background:var(--moss);color:var(--raised)}.account-actions{display:flex;justify-content:center;margin-top:48px}.danger-link{color:#9C5F42}
.authwrap{max-width:400px;margin:0 auto;padding:max(40px,calc(33vh - 30px)) 20px 60px;padding-top:max(40px,calc(33svh - 30px))}.authhead{text-align:center;margin-bottom:34px}.authlogo{font-size:44px;font-weight:700;letter-spacing:.02em;line-height:1.2;margin-bottom:14px}.authlogo span{color:var(--tea);font-weight:500}.authhead h1{margin-bottom:10px}.author{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--faint);font-size:13px}.author::before,.author::after{content:"";flex:1;height:1px;background:var(--rule)}.authsub{font-size:15px;color:var(--tea)}.authnote{margin-top:14px;font-size:13px;color:var(--tea);line-height:1.7;text-align:center}.empty{padding:44px 0;text-align:center;color:var(--dim)}.loading{padding:90px 20px;text-align:center;color:var(--tea);display:flex;align-items:center;justify-content:center;gap:10px}.spin{width:18px;height:18px;border:2px solid var(--rule);border-top-color:var(--moss);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(34px + env(safe-area-inset-bottom));background:var(--ink);color:var(--raised);padding:13px 22px;font-size:15px;z-index:80;max-width:calc(100vw - 32px)}
.authwrap,.modalbox{word-break:keep-all}.authactions{display:flex;flex-direction:column;gap:10px}.kakao-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;background:#5E4B37;color:var(--raised);font-size:16px;font-weight:600;text-decoration:none;transition:filter .15s}.kakao-btn:hover{filter:brightness(1.1)}.kakao-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.kakao-btn svg{color:#FEE500;flex-shrink:0}.modal{position:fixed;inset:0;z-index:90;background:rgba(37,40,33,.45);display:flex;align-items:center;justify-content:center;padding:20px}.modalbox{width:100%;max-width:380px;background:var(--raised);border:1px solid var(--rule);padding:28px 24px 22px;display:flex;flex-direction:column;gap:10px;text-align:center}.modal-copy{margin:4px 0 10px;font-size:14px;color:var(--tea);line-height:1.7}
.profile{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 34px;text-align:center}.avatar{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--raised);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar-empty{font-size:42px;font-weight:700;color:var(--tea)}.avatar-edit{position:absolute;left:0;right:0;bottom:0;padding:3px 0 7px;font-size:11px;color:var(--raised);background:rgba(37,40,33,.42)}.nick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.nick-actions{display:flex;align-items:center;justify-content:center;gap:12px}.nickname{font-size:24px;font-weight:700}.nick-input{width:200px;height:44px;text-align:center}.nick-save{min-height:44px}.vgroup{margin-top:26px}.vgroup h2{margin-bottom:10px}.vcalc{font-size:12px;color:var(--ink);margin-top:4px}.vbtn.vadd{border-style:dashed;justify-content:center;color:var(--tea);min-height:92px;font-size:14px}.vform{display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:10px;margin-top:10px;padding:14px;border:1px solid var(--rule);background:var(--raised)}.vform label{font-size:12px;color:var(--tea);display:flex;flex-direction:column;gap:5px}.vform .field{color:var(--ink)}select.field{cursor:pointer}.vform-actions{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}.vform-actions .btn,.vform-actions .btn2{min-height:44px}.vcard{border:1px solid var(--rule);padding:13px 10px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;min-width:0}.vcard .link{font-size:12px;margin-top:6px}.login-hint{margin-top:10px}.mysection{margin-bottom:34px}.mysection h2{margin-bottom:10px}
.dialwrap{--list:390px;--top:calc(81px + env(safe-area-inset-top));--bot:calc(12px + env(safe-area-inset-bottom));--d:min(340px,88vw,max(260px,calc(100svh - var(--top) - var(--bot) - 36px - var(--list))));--g:max(12px,min(48px,calc((100svh - var(--top) - var(--bot) - 12px - var(--d) - var(--list))/2)));flex:none;display:flex;justify-content:center;padding-top:var(--g);margin-bottom:calc(var(--g) + 12px)}main:has(.shelfsheet){padding-top:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));min-height:0}.wrap:has(>.shelfsheet){display:flex;flex-direction:column;height:calc(100svh - 81px - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.shelfsheet{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:16px}.shelfsheet .shelfhead{flex:none;justify-content:flex-end;margin-bottom:8px}.shelfcount{font-size:13px;color:var(--tea)}.shelfsheet #shelf-box{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--rule);scrollbar-width:none}.shelfsheet #shelf-box::-webkit-scrollbar{display:none}.shelfsheet .shelf{border-top:0;border-bottom:0}.dialname,.dialhan{text-shadow:0 1px 2px rgba(37,40,33,.22)}.dial{position:relative;width:var(--d);height:var(--d)}.dialsvg{display:block;width:100%;height:100%;overflow:visible;touch-action:none;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent}.dialsvg.dragging{cursor:grabbing}.dialsvg.kbd .dialknob{transform:scale(1.5)}.dialring{stroke:none}.dialedge{fill:none;stroke:var(--moss);stroke-width:1.5}.dialwave{pointer-events:none}.dialtick{font-size:var(--tick,13px);fill:var(--tea);text-anchor:middle;dominant-baseline:central;cursor:pointer;user-select:none;transform-box:fill-box;transform-origin:center;transition:fill .18s linear,font-weight .18s linear,transform .18s ease-out,opacity .18s linear}.dialknob{fill:var(--raised);stroke:var(--moss);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:transform .18s ease-out;filter:drop-shadow(0 1px 2px rgba(37,40,33,.25))}.dialsvg.dragging .dialknob{transform:scale(1.5)}@media(hover:hover){.dial:hover .dialknob{transform:scale(1.5)}}.dialcenter{position:absolute;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;user-select:none;touch-action:auto}.dialname{font-size:calc(var(--d) * .128);font-weight:700;line-height:1.15;letter-spacing:.02em;color:var(--paper)}.dialhan{font-size:calc(var(--d) * .053);color:var(--paper);opacity:.92;letter-spacing:.08em}
@media(max-width:860px){nav{gap:18px;font-size:14px}.who{font-size:13px}.field{font-size:16px}h1{font-size:26px}.two{flex-direction:column;gap:26px;align-items:stretch}.side{width:100%}.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.jar{border-bottom:1px solid var(--rule)}.jar:nth-child(n){border-right:1px solid var(--rule)}.jar:nth-child(n+6){border-top:none}.jar:nth-child(2n){border-right:none}.vgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}.vform{grid-template-columns:1fr 1fr}.vform .vf-name{grid-column:1/-1}.selected-tea{align-items:flex-start}.change-tea{white-space:nowrap}.tmlayout{gap:26px}.tmhistory{width:100%;border-left:none;border-top:1px solid var(--rule);padding:20px 0 0}.tmstage{--stage:260px}.tmstage svg{width:260px;height:260px}.tmv{font-size:54px}.lrow{flex-direction:column;gap:8px}.ldate{width:100%}.note-view{align-self:flex-end}.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--raised);border-top:1px solid var(--rule);display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}.dock>.btn,.dock>.btn2{flex:1;min-width:0;max-width:480px}main:has(.dock){padding-bottom:calc(112px + env(safe-area-inset-bottom))}body:has(.dock) .toast{bottom:calc(96px + env(safe-area-inset-bottom))}}

@media(max-width:480px){.hd{padding:0 16px}.logo{font-size:17px}.selected-tea .sil{display:none}.selected-tea{gap:12px}.selected-copy strong{font-size:20px}.side{padding:20px 18px}.vbtn{padding:12px 8px}nav{gap:13px;font-size:13px}.wrap{padding:0 16px}main{padding-top:24px}.dialwrap{--list:268px;--d:min(340px,88vw,max(240px,calc(100svh - var(--top) - var(--bot) - 28px - var(--list))));--g:max(8px,min(40px,calc((100svh - var(--top) - var(--bot) - 12px - var(--d) - var(--list))/2)))}.shelfsheet{padding-top:10px}.shelfhead{margin-bottom:8px}.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.jar{min-height:0;padding:12px 8px 14px;gap:6px}.jar:nth-child(2n){border-right:none}.sil{width:44px;height:48px}.jname{font-size:15px;line-height:1.4}.jfn{font-size:11.5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.condrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:16px 0}.cond{min-width:0}.condv{font-size:15px;white-space:nowrap}.lab{font-size:11px}.nrow{gap:12px}.nn{width:88px}.note-actions{flex-wrap:nowrap}.note-actions .btn,.note-actions .btn2,.account-actions .btn2{flex:1;min-width:0}}
@media(prefers-reduced-motion:reduce){body::before,.shelf,.dialtick{transition:none}.shelf{opacity:1;transform:none}.wv,.spin{animation:none}}
@media(hover:none){body::before{display:none}}