:root{--bg:#fff;--gray:#f1f1f1;--line:#e5e5e5;--txt:#111;--mut:#888;--orange:#ff542f;--blush:#f5e9e5;--deep:#3d2b26}*{box-sizing:border-box}html,body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',sans-serif;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit}a{color:inherit}button{cursor:pointer;border:none;background:none;min-height:44px}#app{min-height:100vh}#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:12px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:999;max-width:90vw}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast[data-kind=error]{background:#c0341b}
.layout{display:flex;min-height:100vh}.sb{width:238px;flex:0 0 238px;background:var(--gray);padding:20px 16px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow:auto}.sb-top{display:flex;align-items:center;justify-content:space-between}.wordmark{font-weight:900;letter-spacing:.5px;font-size:18px}.cog{min-height:32px;width:32px;border-radius:8px;color:#333;font-size:16px}.cog:hover{background:#e2e2e2}.accsel{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px}.accsel-t{display:flex;flex-direction:column;line-height:1.2;overflow:hidden}.accsel-t b{font-size:14px}.accsel-t small{font-size:11px;color:var(--mut)}.addpill{background:var(--orange);color:#fff;font-weight:700;padding:11px 16px;border-radius:24px;font-size:14px;transition:.15s}.addpill:hover{filter:brightness(.95)}.addpill:disabled{opacity:.5;cursor:not-allowed}.nav{display:flex;flex-direction:column;gap:2px}.navi{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;color:#444;text-align:left}.navi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.navi.on{color:var(--orange)}.navi:hover{background:#e8e8e8}.sb-accounts{margin-top:auto;border-top:1px solid #ddd;padding-top:12px}.sb-h{font-size:11px;color:var(--mut);font-weight:700;margin-bottom:6px}.sb-empty{font-size:12px;color:var(--mut);margin:4px 0}.sb-acc{display:flex;align-items:center;gap:8px;width:100%;padding:6px;border-radius:9px;font-size:13px;text-align:left;min-height:40px}.sb-acc.on,.sb-acc:hover{background:#e2e2e2}.sb-add{width:100%;text-align:left;font-size:13px;color:#555;padding:8px 6px;min-height:40px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}.mh{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:5}.mh h1{font-size:26px;font-weight:800;margin:0}.mh-actions{display:flex;gap:8px}.ghost{border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;color:#444;transition:.15s;display:inline-flex;align-items:center;justify-content:center}.ghost:hover{background:#f7f7f7}.ghost.sm{padding:5px 10px;font-size:12px;min-height:34px}.content{padding:24px 32px 60px;flex:1}
.split{display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:start;max-width:1080px}.psum{display:flex;flex-direction:column;gap:14px}.psum-top{display:flex;align-items:center;gap:14px}.psum-t{display:flex;flex-direction:column}.psum-t b{font-size:17px}.psum-t small{font-size:13px;color:var(--mut)}.av{border-radius:50%;object-fit:cover;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}.av-fallback{background:#ddd;color:#777;font-weight:700;font-size:14px}.psum-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gray-btn{background:var(--gray);border-radius:10px;padding:12px;font-weight:600;font-size:14px;min-height:48px}.gray-btn:hover{background:#e6e6e6}.sep{height:10px;background:var(--gray);border-radius:6px;margin:20px 0}.blk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.blk-head b{font-size:16px}.muted{color:var(--mut)}.small{font-size:12.5px}
.lcard{display:flex;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden;background:#fff;transition:.15s}.lcard.off{opacity:.55}.rail{background:#f7f7f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 6px;border-right:1px solid var(--line)}.rail button{min-height:22px;height:22px;width:22px;font-size:10px;color:#999;border-radius:4px}.rail button:hover{background:#e5e5e5;color:#333}.rail button:disabled{opacity:.25}.dots{font-size:11px;color:#ccc;letter-spacing:-2px}.lcard-main{flex:1;padding:10px 12px;min-width:0}.lcard-top{display:flex;align-items:center;gap:8px}.lico{background:var(--orange);color:#fff;width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}.ltag{font-size:12px;font-weight:700;color:#666;margin-right:auto}.toggle{position:relative;display:inline-flex;width:38px;height:22px;min-height:22px}.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.toggle span{width:38px;height:22px;background:#ccc;border-radius:20px;transition:.15s;position:relative}.toggle span::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s}.toggle input:checked+span{background:#3b82f6}.toggle input:checked+span::after{left:18px}.toggle input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}.icobtn{width:28px;min-height:28px;height:28px;font-size:13px;border-radius:6px;color:#888}.icobtn:hover{background:#f0f0f0}.lcard-thumb{width:44px;height:44px;border-radius:8px;background:var(--gray);display:flex;align-items:center;justify-content:center;margin:8px 0;overflow:hidden}.lcard-thumb img{width:100%;height:100%;object-fit:cover}.ph{font-size:18px}.lcard-t{display:flex;flex-direction:column;line-height:1.35}.lcard-t b{font-size:14px}.lcard-t small{font-size:12px;color:var(--mut)}.lcard-foot{font-size:11px;color:#aaa;margin-top:6px}.addrow{display:flex;justify-content:center;padding:14px}.roundadd{width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;font-size:22px;box-shadow:0 4px 12px rgba(255,84,47,.35)}.roundadd:hover{filter:brightness(.95)}
.phone{background:#fff;border:7px solid #d9d9d9;border-radius:48px;overflow:hidden;max-width:360px;margin:0 auto;box-shadow:0 12px 40px rgba(0,0,0,.12)}.ph-inner{background:var(--blush);min-height:640px;padding:26px 18px;display:flex;flex-direction:column;align-items:center}.ph-top{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.ph-av{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#ddd}.ph-fb{display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;color:#fff;background:var(--orange)}.ph-top h3{font-size:18px;font-weight:800;margin:12px 0 6px}.ph-bio{font-size:12px;color:#5a4a44;margin:0 0 12px;white-space:pre-line;line-height:1.5}.ph-search{background:#fff;border-radius:24px;padding:11px 18px;width:100%;font-size:13px;color:#aaa;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:16px}.ph-links{width:100%;display:flex;flex-direction:column;gap:10px}.ph-link{display:flex;align-items:center;gap:10px;background:#fff;border-radius:32px;padding:6px 16px 6px 6px;height:70px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:.15s}.ph-link:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.1)}.ph-link img,.ph-lthumb{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:20px}.ph-link b{font-size:13px;flex:1;text-align:center;padding-right:20px}.ph-empty{text-align:center;color:#a89790;font-size:12px;padding:20px 0}.ph-foot{margin-top:auto;padding-top:20px;font-size:10px;color:#c4b4ae;letter-spacing:1px;font-weight:700}
.form{display:flex;flex-direction:column;gap:12px}.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#444}.form label.row{flex-direction:row;align-items:center;gap:8px}.form input,.form textarea,.form select{border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:14px;min-height:44px;background:#fff}.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}.form input[type=checkbox]{min-height:auto;width:18px;height:18px;padding:0}.form input[type=color]{padding:4px;height:44px}.form-act{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.dlg{background:#fff;border-radius:16px;padding:24px;width:min(480px,100%);max-height:90vh;overflow:auto}.dlg h3{margin:0 0 16px;font-size:19px}.msg{background:#f7f7f7;border-radius:8px;padding:12px;white-space:pre-wrap;font-size:13px;word-break:break-word}
.dm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.dm-head h2{font-size:20px;margin:0}.rcard{border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:12px}.rcard-h{display:flex;align-items:center;gap:10px}.rcard-h b{flex:1;font-size:14px}.tag{background:#eee;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:700}.tag.on{background:#e3f6e8;color:#1a7f37}.rcard-b{margin:8px 0}.rcard-b p{margin:4px 0;font-size:13px;white-space:pre-wrap;word-break:break-word}.rcard-f{display:flex;gap:6px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;max-width:720px}.card{border:1px solid var(--line);border-radius:10px;padding:14px}.card-l{font-size:12px;color:var(--mut)}.card-v{font-size:22px;font-weight:800;margin-top:4px}.loglist{display:flex;flex-direction:column;gap:8px}.logrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px}.logrow>b{font-size:12px}.logrow>div{flex:1;display:flex;flex-direction:column}.logrow small{color:var(--mut);font-size:12px}.logrow span[class^=stat]{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#eee}.stat-sent{background:#e3f6e8!important;color:#1a7f37}.stat-failed{background:#fde8e4!important;color:#c0341b}.stat-processing,.stat-unknown{background:#fff3d6!important;color:#8a5a00}
.conn{max-width:620px}.conn h2{font-size:20px}.warn{background:#fff3d6;border-radius:10px;padding:12px 14px;font-size:13px;color:#7a5000}.conn-row{margin:16px 0}.conn-row label{display:block;font-size:12px;font-weight:700;color:#666;margin-bottom:6px}.copyrow{display:flex;gap:8px;align-items:center}.copyrow code{background:var(--gray);border-radius:8px;padding:10px 12px;font-size:12px;overflow:auto;flex:1;white-space:nowrap}.conn-acts{display:flex;align-items:center;gap:12px;margin:16px 0}.empty-box{border:1px dashed var(--line);border-radius:14px;padding:40px 20px;text-align:center;color:var(--mut)}.empty-box.small{padding:24px;margin:10px 0}.empty-box p{margin:0 0 16px;font-size:14px}.onboard{max-width:560px}.onboard h2{font-size:22px}.onboard p{color:var(--mut);font-size:14px}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(max-width:960px){.split{grid-template-columns:1fr}.phone{margin-top:20px;max-width:320px}.cards{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.layout{flex-direction:column}.sb{width:100%;flex:none;position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px}.sb-top{flex:0 0 auto}.wordmark{font-size:15px}.accsel{background:#fff;padding:6px 10px}.accsel-t small{display:none}.addpill{padding:8px 12px;min-height:40px}.nav{flex-direction:row;flex:1;justify-content:flex-end;gap:2px}.navi{padding:6px 8px;font-size:12px}.navi svg{width:16px;height:16px}.sb-accounts{display:none}.mh{padding:14px 16px}.mh h1{font-size:20px}.mh-actions .ghost{padding:6px 10px;font-size:12px}.content{padding:16px}.dlg{padding:18px}.cards{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Public profile mirrors the narrow, rounded Inpock link page. */
.public-mode{background:#795a47}.public-mode #app{padding:30px 16px}.public-page{max-width:436px;margin:0 auto;min-height:calc(100dvh - 60px);background:var(--blush);border-radius:36px;padding:24px 16px;position:relative;display:flex;flex-direction:column;align-items:stretch}.pub-tools{display:flex;justify-content:flex-end}.pub-profile{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 8px 22px}.pub-profile h1{font-size:22px;margin:0;overflow-wrap:anywhere}.pub-profile p{white-space:pre-line;line-height:1.6;font-size:14px;margin:6px 0;overflow-wrap:anywhere}.pub-instagram{font-size:13px;text-decoration:none;color:#63544e}.pub-search{display:flex;align-items:center;gap:8px;background:white;border-radius:28px;padding:0 14px;margin:8px 0 24px;box-shadow:0 2px 6px #00000009}.pub-search span{font-size:26px;color:#777}.pub-search input{border:0;background:transparent;min-height:48px;width:100%;min-width:0;outline-offset:3px;font-size:14px}.pub-linktext{display:flex;flex-direction:column;align-items:center;flex:1;gap:4px;min-width:0;text-align:center}.pub-linktext b{padding:0;font-weight:500;overflow-wrap:anywhere}.pub-linktext small{font-size:12px;color:#64544e;overflow-wrap:anywhere}.public-page .ph-link{height:auto;min-height:76px;border-radius:40px;padding:8px;gap:10px}.pub-footer{text-align:center;font-size:12px;font-weight:800;letter-spacing:1px;margin-top:auto;padding-top:48px;color:#66534a}.pub-empty{text-align:center;color:#675650;font-size:14px;padding:24px}.phone{position:sticky;top:24px;min-width:0;width:100%}.split-l{min-width:0}.main{min-width:0}.content{min-width:0}.lcard-t b,.lcard-t small{overflow-wrap:anywhere}.loading{padding:32px}.toggle{width:44px;min-width:44px;height:44px;min-height:44px;align-items:center}.toggle input{z-index:1}.toggle span{flex-shrink:0;pointer-events:none}.rail button,.icobtn{min-width:36px;min-height:36px;height:36px}.ph-link b{overflow-wrap:anywhere}.ph-link{height:auto;min-height:70px}.copyrow{min-width:0}.copyrow code{min-width:0}.dlg label input,.dlg label select,.dlg label textarea{max-width:100%;min-width:0}.sb-acc span{overflow:hidden;text-overflow:ellipsis}.form input[type=checkbox]{margin-right:6px}.form label.row{min-height:44px}.form label.row:has(select){flex-wrap:wrap}.logrow{flex-wrap:wrap}.sb-empty,.muted,.card-l{color:#666}.lcard-foot{color:#666}
@media(max-width:1100px) and (min-width:721px){.split{grid-template-columns:minmax(0,1fr) 310px;gap:20px}.content{padding:24px}.sb{width:205px;flex-basis:205px}.ph-inner{padding:22px 12px}}
@media(max-width:720px){.public-mode #app{padding:0}.public-page{min-height:100dvh;max-width:100%;border-radius:0;padding:20px 16px}.sb{gap:10px}.sb-accounts{display:flex;flex:1 1 100%;flex-direction:row;align-items:center;overflow:auto;padding:0;border-top:1px solid #ddd;gap:6px}.sb-h,.sb-empty{display:none}.sb-acc{flex:0 0 auto;min-width:0;max-width:170px}.sb-add{white-space:nowrap;flex-shrink:0}.nav{flex:1 1 100%;justify-content:space-between;order:3}.sb-accounts{order:2}.sb>.addpill{margin-left:auto}.mh{flex-wrap:wrap;gap:8px}.mh-actions{flex-wrap:wrap}.split{grid-template-columns:minmax(0,1fr)}.phone{position:static}.rail button,.icobtn{min-width:36px;min-height:44px;height:44px}.rcard-h{flex-wrap:wrap}.ph-link b{padding-right:4px}}
.public-page .av-fallback,.ph-fb{background:var(--profile-accent,#ff542f);color:#fff}.lcard-thumb{float:left;margin-right:10px}.lcard-t{min-height:44px;justify-content:center;margin-top:8px}.lcard-foot{clear:both;border-top:1px solid #f1f1f1;padding-top:6px}.ph-av.ph-fb{background:var(--profile-accent,#ff542f)}.ph-link:hover{transform:none}

@font-face{font-family:MaruBuri;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2') format('woff2');font-weight:400 700;font-display:swap}
/*
 * 푸니링크 (PuniLink) Reference CSS - v1
 * Assigned: 노아 · 개발팀
 * Reference: https://link.inpock.co.kr/hayoon_pick
 * Imported AFTER existing styles.css
 */

/* ==========================================================================
   1. Typography & Global Page Container
   ========================================================================== */

/* Public page typography: MaruBuri serif font (main supplies font file) */
.public-mode,
.public-page,
.phone .ph-inner {
  font-family: 'MaruBuri', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', serif;
  -webkit-font-smoothing: antialiased;
}

/* Desktop viewport body background: #7c6056 */
.public-mode {
  background-color: #7c6056 !important;
  margin: 0;
  padding: 0;
}

.public-mode #app {
  padding: 0 !important;
  min-height: 100vh;
  background-color: transparent;
}

/* Central public page container:
   Desktop: width 440px, margin-top 32px, background #f6edea, top corners 32px, no bottom rounding */
.public-mode .public-page,
.public-page {
  max-width: 440px;
  width: 100%;
  margin: 32px auto 0 auto;
  min-height: calc(100dvh - 32px);
  background-color: #f6edea;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0 0 44px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Mobile viewport (<=480px): full width, flush top, no rounding */
@media (max-width: 480px) {
  .public-mode #app {
    padding: 0 !important;
  }

  .public-mode .public-page,
  .public-page {
    max-width: 100%;
    width: 100%;
    margin: 0 !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    padding: 0 0 36px 0;
  }
}

/* ==========================================================================
   2. Top Disclosure Banner
   ========================================================================== */

/* Full page width, 38px high, #3e507f bg, #ffcbe0 text 14px bold, scrolling */
.public-page > .pub-disclosure,
.phone .pub-disclosure {
  width: 100%;
  height: 38px;
  min-height: 38px;
  background-color: #3e507f;
  color: #ffcbe0;
  font-size: 14px;
  font-weight: 700;
  line-height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  z-index: 2;
}

/* Track containing two span copies for seamless loop */
.pub-disclosure .disclosure-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: pubDisclosureMarquee 18s linear infinite;
  will-change: transform;
}

.pub-disclosure:hover .disclosure-track {
  animation-play-state: paused;
}

.pub-disclosure .disclosure-track span {
  display: inline-block;
  padding-right: 48px;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes pubDisclosureMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Reduced motion full disclosure: unclipped, auto-height readable text */
@media (prefers-reduced-motion: reduce) {
  .public-page > .pub-disclosure,
  .phone .pub-disclosure {
    height: auto;
    min-height: 38px;
    line-height: 1.45;
    padding: 10px 16px;
    white-space: normal;
    overflow: visible;
  }

  .pub-disclosure .disclosure-track {
    animation: none !important;
    transform: none !important;
    display: block;
    width: 100%;
    white-space: normal;
  }

  .pub-disclosure .disclosure-track span[aria-hidden="true"] {
    display: none !important;
  }

  .pub-disclosure .disclosure-track span {
    display: block;
    white-space: normal;
    padding-right: 0;
    line-height: 1.45;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   3. Profile Tools (Share Button)
   ========================================================================== */

/* Profile tools share round translucent 40px left */
.public-page .pub-tools {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 12px 16px 0 16px;
  min-height: 40px;
}

.public-page .pub-tools button,
.public-page .pub-tools a,
.public-page .pub-tools .pub-share-btn,
.public-page .pub-tools .pub-tool-btn,
.public-page .pub-tools > * {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a3e39;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease;
}

.public-page .pub-tools button:hover,
.public-page .pub-tools a:hover,
.public-page .pub-tools > *:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   4. Profile Section
   ========================================================================== */

/* Avatar begins approx 56px below banner (12px tools pad + 40px tool + 4px) */
.public-page .pub-profile {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 0 16px;
  box-sizing: border-box;
}

/* 80px round avatar */
.public-page .pub-profile .av,
.public-page .pub-profile img.av,
.public-page .av {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.public-page .av-fallback {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--profile-accent, #ff542f);
}

/* Heading 16px below avatar, 16px font-size */
.public-page .pub-profile h1 {
  font-size: 16px;
  font-weight: 700;
  color: #2b221e;
  margin: 16px 0 0 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Optional bio */
.public-page .pub-profile p {
  font-size: 13px;
  color: #5a4a44;
  margin: 8px 0 0 0;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* No extra @username displayed */
.public-page .pub-profile .pub-handle,
.public-page .pub-profile .pub-username,
.public-page .pub-profile small.handle {
  display: none !important;
}

/* ==========================================================================
   5. Search & Search Hint
   ========================================================================== */

/* Search: 48px high, #f9f9fb, pill, margin 32px 16px 24px */
.public-page .pub-search {
  height: 48px;
  min-height: 48px;
  background-color: #f9f9fb;
  border-radius: 999px;
  margin: 32px 16px 24px 16px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.public-page .pub-search span {
  font-size: 20px;
  color: #998d87;
  margin-right: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.public-page .pub-search input {
  height: 100%;
  min-height: 44px;
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  color: #2b221e;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.public-page .pub-search input::placeholder {
  color: #a3958f;
  font-size: 14px;
}

.public-page .pub-search input:focus-visible {
  outline: none;
}

/* Search hint: centered, 14px, bottom 28px */
.public-page .pub-search-hint {
  text-align: center;
  font-size: 14px;
  color: #7a6b65;
  margin: -8px 16px 28px 16px;
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   6. Card Arrangement & Links
   ========================================================================== */

/* Container with 16px horizontal padding -> 440px - 32px = 408px desktop cards */
.public-page #public-links.ph-links,
.public-page .ph-links {
  width: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

/* Cards: 76px minheight, round 999px white with subtle shadow */
.public-page #public-links.ph-links > a.ph-link,
.public-page .ph-links > a.ph-link,
.public-page .ph-link {
  min-height: 76px;
  height: auto;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  padding: 8px 24px 8px 8px;
  gap: 0;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.public-page .ph-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

/* Circular thumb 60px at left inset 8px */
.public-page .ph-link img,
.public-page .ph-link span.ph-lthumb,
.public-page .ph-link .ph-lthumb {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0;
  background-color: #f3ede9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}

/* Centered text in remaining width */
.public-page .pub-linktext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 16px 0 8px;
}

/* 14px link labels */
.public-page .pub-linktext b,
.public-page .ph-link b {
  font-size: 14px;
  font-weight: 700;
  color: #241c18;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: keep-all;
  padding: 0;
}

/* Description / badge above title if exists */
.public-page .pub-linktext small {
  font-size: 11.5px;
  color: #776a64;
  margin-bottom: 4px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* Optional orange small pill for coupon descriptions */
.public-page .pub-linktext small.pill,
.public-page .pub-linktext small.badge,
.public-page .pub-linktext small.coupon,
.public-page .pub-linktext .pub-coupon,
.public-page .pub-linktext .pub-badge {
  display: inline-block;
  background-color: #ff542f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
  line-height: 1.25;
}

/* Empty state */
.public-page .pub-empty,
.public-page .ph-empty {
  text-align: center;
  color: #8c7b74;
  font-size: 14px;
  padding: 32px 16px;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

/* Modest 푸니링크 footer */
.public-page .pub-footer {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  margin-top: auto;
  padding: 48px 16px 28px 16px;
  color: #a89a93;
}

/* ==========================================================================
   8. Phone Preview Alignment (Admin Mirror)
   ========================================================================== */

/* Phone preview background matches measured blush #f6edea */
.phone .ph-inner {
  background-color: #f6edea;
}

/* Banner inside phone preview */
.phone .ph-inner > .pub-disclosure {
  width: calc(100% + 36px);
  margin: -26px -18px 20px -18px;
  height: 34px;
  min-height: 34px;
  font-size: 12.5px;
  line-height: 34px;
}

.phone .pub-disclosure .disclosure-track span {
  padding-right: 36px;
}

/* Profile in phone preview */
.phone .ph-av {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.phone .ph-top h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0 0 0;
  color: #2b221e;
}

.phone .ph-bio {
  font-size: 12.5px;
  color: #5a4a44;
  margin: 8px 0 0 0;
}

/* Search in phone preview */
.phone .ph-search {
  height: 48px;
  min-height: 48px;
  background-color: #f9f9fb;
  border-radius: 999px;
  margin: 24px 0 16px 0;
  box-sizing: border-box;
  font-size: 13.5px;
  color: #998d87;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.phone .pub-search-hint {
  font-size: 13px;
  text-align: center;
  color: #7a6b65;
  margin: -6px 0 20px 0;
}

/* Links in phone preview */
.phone .ph-links {
  gap: 14px;
  width: 100%;
}

.phone .ph-link {
  min-height: 72px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 6px 16px 6px 6px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.phone .ph-link img,
.phone .ph-lthumb {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  flex-shrink: 0;
}

.phone .ph-link .pub-linktext,
.phone .pub-linktext {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 8px;
}

.phone .pub-linktext b,
.phone .ph-link b {
  font-size: 13.5px;
  font-weight: 700;
  color: #241c18;
  padding: 0;
}

.phone .pub-linktext small {
  font-size: 11px;
  color: #776a64;
  margin-bottom: 2px;
}

.phone .ph-foot {
  color: #a89a93;
  font-size: 11px;
  margin-top: auto;
  padding-top: 24px;
}

/* ==========================================================================
   9. Narrow Screen Overflow Prevention (320px)
   ========================================================================== */

@media (max-width: 360px) {
  .public-page #public-links.ph-links,
  .public-page .ph-links {
    padding: 0 12px;
  }

  .public-page .ph-link {
    padding: 8px 16px 8px 8px;
  }

  .public-page .ph-link img,
  .public-page .ph-link span.ph-lthumb,
  .public-page .ph-link .ph-lthumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .public-page .pub-search {
    margin: 24px 12px 20px 12px;
  }

  .public-page .pub-search-hint {
    margin: -6px 12px 24px 12px;
  }
}

/* Integration adjustments for existing preview and optional business contact. */
.public-page .pub-profile{gap:0}
.pub-contact{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-size:12px;background:#fff8f5;border:1px solid #e9ded9;border-radius:12px;min-height:38px;padding:8px 10px;margin-top:16px;color:#1a211e}
.phone .pub-contact{margin:16px auto 0;font-size:12px;min-height:38px}
.phone .pub-linktext .coupon-badge,.public-page .pub-linktext .coupon-badge{background:#ffbd4f;color:#55370e;border-radius:40px;font-size:10px;padding:3px 8px;font-weight:700;line-height:14px;margin:0 0 3px}
@font-face{font-family:MaruBuri;src:url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
.public-mode #app{display:flow-root}
.public-page .pub-search-hint{margin-top:2px}
.public-page .pub-tools{position:absolute;top:70px;left:16px;padding:0}
.public-page:has(>.pub-disclosure) .pub-tools{top:70px}
.public-page .pub-profile{padding-top:56px}
.public-page .pub-tools button{font-family:system-ui,sans-serif;font-size:22px;color:#fff;background:#0002;border:0}
.public-page .pub-linktext b{font-weight:400}
.phone .ph-inner{padding:0 16px 26px;overflow:hidden;align-items:stretch}
.phone .ph-inner>.pub-disclosure{width:calc(100% + 32px);margin:0 -16px;height:38px;min-height:38px;line-height:38px}
.phone .ph-top{padding-top:56px}
.phone .ph-search{margin:32px 0 24px;min-height:48px;height:48px;background:#f9f9fb;border-radius:999px;text-align:left;padding:15px 14px;font-size:14px;line-height:18px;color:#a3958f}
.phone .pub-search-hint{margin:2px 0 28px}
.phone .ph-links{gap:16px}
@media(prefers-reduced-motion:reduce){.phone .ph-inner>.pub-disclosure{height:auto;line-height:1.45}}

/*
 * 푸니링크 (PuniLink) Block Editor & Public Block Elements CSS
 * Assigned: 노아 · 개발팀
 * Contract: projects/linknest/work/editor-frontend-worker-v1.md
 * Scope: .content-block, .block-editor-form, .sticker-editor, .block-form-preview
 */

/* ==========================================================================
   1. Form & Modal Editor Layout (.block-editor-form)
   ========================================================================== */

.block-editor-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: #2b221e;
  padding: 4px;
}

.block-editor-form *,
.block-editor-form *::before,
.block-editor-form *::after {
  box-sizing: border-box;
}

.block-editor-form .form-row {
  display: flex;
  gap: 12px;
  width: 100%;
}

.block-editor-form .form-row-split {
  flex-direction: row;
}

@media (max-width: 480px) {
  .block-editor-form .form-row-split {
    flex-direction: column;
    gap: 12px;
  }
}

.block-editor-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.block-editor-form label,
.block-editor-form .field-label-fake {
  font-size: 13px;
  font-weight: 700;
  color: #3b2f29;
}

.block-editor-form .required-mark {
  color: #ff542f;
  margin-left: 2px;
}

.block-editor-form input[type="text"],
.block-editor-form input[type="url"],
.block-editor-form input[type="number"],
.block-editor-form input[type="date"],
.block-editor-form input[type="datetime-local"],
.block-editor-form select,
.block-editor-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #d9cbbf;
  border-radius: 10px;
  background-color: #ffffff;
  color: #2b221e;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.block-editor-form input[type="text"]:focus-visible,
.block-editor-form input[type="url"]:focus-visible,
.block-editor-form input[type="number"]:focus-visible,
.block-editor-form input[type="date"]:focus-visible,
.block-editor-form input[type="datetime-local"]:focus-visible,
.block-editor-form select:focus-visible,
.block-editor-form textarea:focus-visible {
  border-color: #ff542f;
  box-shadow: 0 0 0 3px rgba(255, 84, 47, 0.15);
}

.block-editor-form textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.4;
}

/* Image File Upload Group */
.block-editor-form .image-input-group {
  display: flex;
  gap: 8px;
}

.block-editor-form .image-input-group input[type="text"] {
  flex: 1;
}

.block-editor-form .btn-file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  min-height: 42px;
  background-color: #f0e4df;
  color: #4a3e39;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #d9cbbf;
}

.block-editor-form .btn-file-label:hover {
  background-color: #e5d7d1;
}

.block-editor-form .btn-file-label input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Checkbox Row */
.block-editor-form .checkbox-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 42px;
}

.block-editor-form .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3b2f29;
  cursor: pointer;
}

.block-editor-form .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ff542f;
  cursor: pointer;
}

/* Fieldset Container */
.block-editor-form .form-fieldset {
  border: 1px solid #e5d8d0;
  border-radius: 14px;
  padding: 14px;
  background-color: #faf5f3;
  margin: 0;
}

.block-editor-form .form-fieldset legend {
  font-size: 12.5px;
  font-weight: 700;
  color: #6a5750;
  padding: 0 6px;
}

.block-editor-form .field-hint {
  font-size: 12px;
  color: #7a6b65;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Color input standardizer */
.block-editor-form input[type="color"] {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 2px;
  border: 1px solid #d9cbbf;
  border-radius: 8px;
  background-color: #ffffff;
  cursor: pointer;
}

/* ==========================================================================
   2. Dynamic Sticker, Collection & Calendar Editors
   ========================================================================== */

.sticker-editor .sticker-list,
.collection-editor .collection-items-list,
.calendar-editor .calendar-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* Sticker Row */
.sticker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ebdcd5;
}

.sticker-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sticker-text-input {
  flex: 2;
  min-width: 80px;
}

.sticker-color-pickers {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticker-shape-select {
  flex: 1;
  min-width: 84px;
}

.sticker-row-btns,
.item-btns,
.event-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-icon {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 6px;
  border: 1px solid #dfd0c7;
  background: #fdfaf8;
  color: #55443d;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}

.btn-icon:hover {
  background: #f0e2db;
}

.btn-icon.btn-del {
  color: #c93b1b;
}

.btn-icon.btn-del:hover {
  background: #ffe8e3;
  border-color: #f7b4a6;
}

/* Collection & Calendar Row */
.collection-item-row,
.calendar-event-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #ebdcd5;
}

.collection-item-row .item-fields,
.calendar-event-row .event-fields {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.collection-item-row .item-fields input,
.calendar-event-row .event-fields input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 520px) {
  .sticker-row,
  .collection-item-row,
  .calendar-event-row {
    flex-direction: column;
    align-items: stretch;
  }
  .sticker-row-main,
  .collection-item-row .item-fields,
  .calendar-event-row .event-fields {
    flex-direction: column;
    gap: 6px;
  }
  .sticker-row-btns,
  .item-btns,
  .event-btns {
    justify-content: flex-end;
    margin-top: 4px;
  }
}

.sub-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.btn-secondary {
  height: 34px;
  padding: 0 14px;
  background-color: #ffffff;
  border: 1px dashed #cbb6ab;
  border-radius: 8px;
  color: #4a3e39;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background-color: #f8f1ee;
  border-color: #ff542f;
  color: #ff542f;
}

/* ==========================================================================
   3. Live Preview Container (.block-form-preview)
   ========================================================================== */

.form-preview-wrapper {
  margin-top: 8px;
  border: 1px solid #e0d1c8;
  border-radius: 16px;
  overflow: hidden;
  background-color: #f6edea;
}

.form-preview-wrapper .preview-header {
  padding: 8px 14px;
  background-color: #eae0db;
  border-bottom: 1px solid #d9cbbf;
}

.form-preview-wrapper .preview-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #6a5750;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.block-form-preview {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  width: 100%;
}

.block-form-preview > .content-block,
.block-form-preview > .ph-link {
  width: 100%;
  max-width: 408px;
}

/* ==========================================================================
   4. Form Actions (Save & Cancel)
   ========================================================================== */

.block-editor-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
}

.block-editor-form .btn-cancel {
  height: 44px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid #d5c6be;
  background-color: #ffffff;
  color: #55443d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.block-editor-form .btn-cancel:hover {
  background-color: #f3eae5;
}

.block-editor-form button.addpill,
.block-editor-form .addpill {
  height: 44px;
  min-height: 44px;
  padding: 0 28px;
  border-radius: 999px;
  border: none;
  background-color: #ff542f;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 84, 47, 0.25);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.block-editor-form button.addpill:hover,
.block-editor-form .addpill:hover {
  background-color: #e5431f;
  transform: translateY(-1px);
}

/* ==========================================================================
   5. Public & Preview Block Styles (.content-block)
   ========================================================================== */

.content-block {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* --- Sticker Shapes --- */
.block-stickers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  align-items: center;
  justify-content: center;
}

.block-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* Shape 1: Pill */
.sticker-pill {
  border-radius: 999px;
  padding: 3px 9px;
}

/* Shape 2: Rounded Rectangle */
.sticker-rounded {
  border-radius: 5px;
  padding: 3px 8px;
}

/* Shape 3: Speech Bubble (Tail with :after) */
.sticker-bubble {
  position: relative;
  border-radius: 8px;
  padding: 3px 8px;
  margin-bottom: 4px;
}

.sticker-bubble::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 8px;
  width: 6px;
  height: 6px;
  background: inherit;
  transform: rotate(45deg);
}

/* Shape 4: Ticket (CSS radial notch mask) */
.sticker-ticket {
  position: relative;
  border-radius: 4px;
  padding: 3px 12px;
  -webkit-mask-image: radial-gradient(circle at 0% 50%, transparent 3.5px, #000 4px),
                      radial-gradient(circle at 100% 50%, transparent 3.5px, #000 4px);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(circle at 0% 50%, transparent 3.5px, #000 4px),
              radial-gradient(circle at 100% 50%, transparent 3.5px, #000 4px);
  mask-composite: intersect;
}

/* Store Badge */
.block-store-badge {
  display: inline-block;
  background-color: #ff542f;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
  line-height: 1.3;
}

/* Description inside Link */
.content-block .block-desc {
  font-size: 11.5px;
  color: #776a64;
  margin-bottom: 3px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* --- 4 Styles for Link & Store --- */

/* 1. Thumbnail Style (Pill container from reference.css) */
.content-block.style-thumbnail {
  min-height: 76px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  padding: 8px 24px 8px 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.content-block.style-thumbnail:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.content-block.style-thumbnail .ph-lthumb {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0;
  background-color: #f3ede9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}

/* 2. Simple Style (No image pill) */
.content-block.style-simple {
  min-height: 62px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.content-block.style-simple:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.content-block.style-simple .pub-linktext {
  padding: 0;
  width: 100%;
}

/* 3. Card Style (Big Photo Card) */
.content-block.style-card {
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.content-block.style-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.content-block.style-card .block-card-image {
  width: 100%;
  height: 180px;
  max-height: 220px;
  background-color: #f3ede9;
  overflow: hidden;
}

.content-block.style-card .block-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.content-block.style-card .block-card-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 4. Background Style (Image with Readable Gradient Overlay) */
.content-block.style-background {
  min-height: 120px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #3b2f29;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.content-block.style-background:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.content-block.style-background .block-bg-overlay {
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.68) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 20px;
  color: #ffffff;
}

.content-block.style-background b {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.content-block.style-background .block-desc {
  color: #f0e6e2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- Type 3: Text Block --- */
.content-block.block-text {
  padding: 12px 16px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.content-block.block-text .block-text-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.content-block.block-text .block-text-body {
  white-space: pre-line;
}

/* --- Type 4: Image Block --- */
.content-block.block-image,
.content-block.block-image-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
}

.content-block img.block-pure-image {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.content-block .ph-empty-img {
  width: 100%;
  height: 160px;
  background-color: #f0e6e2;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.content-block .block-image-caption {
  font-size: 13px;
  font-weight: 600;
  color: #5a4a44;
  margin-top: 8px;
  text-align: center;
}

/* --- Type 5: Video Block --- */
.content-block.block-video {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-block.block-video .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 16px;
  overflow: hidden;
  background-color: #000000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}

.content-block.block-video .video-container iframe,
.content-block.block-video .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.content-block.block-video .video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8ded9;
  color: #7a6b65;
  font-size: 13px;
}

.content-block.block-video .block-video-title {
  font-size: 14px;
  font-weight: 700;
  margin-top: 8px;
  color: #241c18;
}

/* --- Type 6: Divider Block --- */
.content-block.block-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}

.content-block.block-divider .divider-line {
  width: 100%;
  margin: 0;
  border: 0;
  border-top-width: 1.5px;
}

.content-block.block-divider.variant-space {
  height: 24px;
  padding: 0;
}

/* --- Type 7: Collection Block --- */
.content-block.block-collection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-block.block-collection .collection-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #2b221e;
  margin: 0 0 4px 0;
  text-align: center;
}

.content-block.block-collection.layout-list .collection-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content-block.block-collection.layout-grid .collection-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.collection-item {
  background-color: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #241c18;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.collection-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.collection-item img,
.collection-item .item-img-placeholder {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  object-fit: cover;
  background-color: #f3ede9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.collection-item-title {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

/* Layout Grid Card Variant */
.content-block.block-collection.layout-grid .collection-item {
  flex-direction: column;
  text-align: center;
  padding: 12px 8px;
}

.content-block.block-collection.layout-grid .collection-item img,
.content-block.block-collection.layout-grid .collection-item .item-img-placeholder {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 10px;
  margin-bottom: 6px;
}

/* --- Type 8: Calendar Block --- */
.content-block.block-calendar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.content-block.block-calendar .calendar-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #2b221e;
  margin: 0 0 4px 0;
  text-align: center;
}

.content-block.block-calendar .calendar-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.02);
  text-decoration: none;
  color: inherit;
}

.calendar-event-item.is-link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-event-item.is-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.calendar-event-item .event-date {
  font-size: 12px;
  font-weight: 700;
  background-color: #f4ece8;
  color: #ff542f;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.calendar-event-item .event-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #2b221e;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.calendar-event-item .event-arrow {
  font-size: 16px;
  color: #a89a93;
  flex-shrink: 0;
}

/* ==========================================================================
   6. Emphasis Animations (.emp-shake, .emp-pulse, .emp-bounce)
   ========================================================================== */

@keyframes blockEmpShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

@keyframes blockEmpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes blockEmpBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

.emp-shake {
  animation: blockEmpShake 1.2s ease-in-out infinite;
}

.emp-pulse {
  animation: blockEmpPulse 1.8s ease-in-out infinite;
}

.emp-bounce {
  animation: blockEmpBounce 1.6s ease infinite;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .emp-shake,
  .emp-pulse,
  .emp-bounce {
    animation: none !important;
  }
}

/* ==========================================================================
   7. Mobile & Narrow Viewport Support (Down to 320px)
   ========================================================================== */

@media (max-width: 360px) {
  .block-editor-form {
    padding: 0;
    gap: 12px;
  }

  .content-block.style-thumbnail {
    padding: 6px 14px 6px 6px;
  }

  .content-block.style-thumbnail .ph-lthumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }

  .content-block.block-collection.layout-grid .collection-items {
    grid-template-columns: 1fr;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.public-page,.phone .ph-inner{background:var(--page-background,#f6edea)!important;color:var(--text-color,#1a211e);font-family:var(--profile-font,MaruBuri,serif)}
.public-page .pub-profile{align-items:var(--profile-align,center);text-align:var(--profile-align,center)}.public-page .pub-profile h1,.phone .ph-top h3{font-size:var(--profile-size,16px);color:var(--text-color,#1a211e)}
.public-page .pub-profile p,.phone .ph-bio{color:var(--text-color,#1a211e)}.public-page .pub-disclosure,.phone .pub-disclosure{background:var(--disclosure-bg,#3e507f);color:var(--disclosure-color,#ffcbe0)}
.pub-disclosure.no-motion{height:auto!important;white-space:normal;padding:10px 16px;line-height:1.5}.pub-disclosure.no-motion .disclosure-track{animation:none!important;display:block;width:100%;white-space:normal}.pub-disclosure.no-motion span{white-space:normal;padding:0;overflow-wrap:anywhere}.pub-disclosure.no-motion [aria-hidden=true]{display:none}
.public-page .content-block.block-link,.phone .content-block.block-link{background-color:var(--button-color,#fff);color:var(--button-text,#1a211e);border-radius:var(--button-radius,40px)}.public-page .content-block.block-link b,.phone .content-block.block-link b{color:inherit}
.public-page .ph-links .style-card,.phone .ph-links .style-card{display:block;padding:0;overflow:hidden;min-height:0}.public-page .ph-links .style-card img,.phone .ph-links .style-card img{width:100%;height:180px;border-radius:0;object-fit:cover;display:block}.public-page .style-card .block-card-body,.phone .style-card .block-card-body{padding:20px}
.public-page .style-background,.phone .style-background{background-size:cover;background-position:center;min-height:150px!important}.admin-block-preview{padding:12px 0}.admin-block-preview .content-block{max-width:420px;margin:auto}.admin-block-preview .content-block .block-card-image img{max-height:120px;object-fit:cover}.block-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}.lcard-top{flex-wrap:wrap}.lcard-main{min-width:0}.block-picker,.design-colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stats-table{max-width:100%;overflow:auto}.stats-table table{border-collapse:collapse;width:100%;text-align:left}.stats-table th,.stats-table td{padding:12px;border-bottom:1px solid #ddd}.dlg:has(.block-editor),.dlg:has([data-form=design]){max-width:720px;width:min(720px,96vw)}.dlg{max-height:92dvh;overflow:auto}.design-preview .phone{position:static;max-width:320px;margin:20px auto}.design-preview .ph-inner{min-height:0}.design-preview .ph-links{max-height:280px;overflow:auto}.block-editor input,.block-editor select,.block-editor textarea{min-width:0;max-width:100%}.ph-links>.content-block{flex-shrink:0}
@media(max-width:480px){.block-picker,.design-colors{grid-template-columns:1fr 1fr}.stats-table th,.stats-table td{padding:8px;font-size:12px}.dlg{padding:14px}}
.block-calendar{background:#fff;border-radius:14px;padding:16px;color:#222;width:100%;min-width:0}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between}.calendar-toolbar button{min-width:44px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}.calendar-grid>span{font-size:11px;padding:6px}.calendar-day{min-height:48px;background:#faf7f5;min-width:0;border-radius:5px;padding:4px}.calendar-day>time{font-size:11px}.calendar-event{display:flex;flex-direction:column;gap:5px;text-decoration:none;border-bottom:1px solid #eee;padding:10px 0;text-align:left}.calendar-event time{font-size:10px;color:#666;overflow-wrap:anywhere}.event-status{font-size:10px;color:#c14a28}.calendar-day .calendar-event{font-size:10px;overflow-wrap:anywhere;padding:4px 0;line-height:1.3}.calendar-day .calendar-event time,.calendar-day .event-status{display:none}.calendar-editor .event-fields{min-width:0}.calendar-editor .event-fields label{font-size:12px}
.public-page .pub-profile,.phone .ph-top{align-items:var(--profile-items,center);text-align:var(--profile-align,center)}.phone .ph-top .pub-contact{margin-left:0;margin-right:0}.public-page .pub-search:focus-within{outline:2px solid #ff542f;outline-offset:3px}
.dlg:has(.block-editor-form){max-width:720px;width:min(720px,96vw)}.block-editor-form fieldset{min-width:0}.block-editor-form input,.block-editor-form select,.block-editor-form textarea{max-width:100%;min-width:0}.sticker-row-main{flex-wrap:wrap}.calendar-event-row .event-fields{flex-direction:column}.block-editor-form .sticker-text-input{min-width:70px}.block-editor-form .sticker-shape-select{min-width:80px}.block-editor-form .sticker-row{flex-wrap:wrap}
.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.inquiry-card{padding:18px;border:1px solid #e5e5e5;border-radius:12px;margin:14px 0}.inquiry-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}.inquiry-card p{font-size:12px;color:#666;overflow-wrap:anywhere}.inquiry-message{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;padding:12px 0}

/* ==========================================================================
   Punilink UI Polish 20261025 v1 (public/polish.css)
   Loaded last to unify card preview, fix stickers, spacing & admin glass/teal
   ========================================================================== */

/* --------------------------------------------------------------------------
   AC1: Card Component Unification (admin preview, phone, public, block editor)
   -------------------------------------------------------------------------- */

/* 1. Unify card wrapper */
.content-block.style-card,
.ph-link.style-card,
.admin-block-preview .content-block.style-card,
.phone .content-block.style-card,
.phone .ph-links .style-card,
.public-page .content-block.style-card,
.public-page .ph-links .style-card,
.block-form-preview .content-block.style-card,
.block-editor .content-block.style-card,
.dlg .content-block.style-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: var(--button-radius, 20px) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 2. Card image wrapper: aspect-ratio 16/9, height auto, clear inherited 180px/120px cap */
.content-block.style-card .block-card-image,
.ph-link.style-card .block-card-image,
.admin-block-preview .content-block.style-card .block-card-image,
.phone .style-card .block-card-image,
.public-page .style-card .block-card-image,
.block-form-preview .style-card .block-card-image,
.block-editor .style-card .block-card-image {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
  background-color: #f3ede9 !important;
  position: relative !important;
  margin: 0 !important;
}

/* 3. Card image: width 100%, height 100%, border-radius 0, object-fit cover (clears 58x58 circle & 120px squashing) */
.content-block.style-card .block-card-image img,
.content-block.style-card img,
.ph-link.style-card .block-card-image img,
.ph-link.style-card > img:not(.ph-lthumb),
.admin-block-preview .content-block .block-card-image img,
.phone .ph-links .style-card img,
.phone .style-card .block-card-image img,
.public-page .ph-links .style-card img,
.public-page .style-card .block-card-image img,
.block-form-preview .style-card .block-card-image img,
.block-editor .style-card .block-card-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  display: block !important;
  flex: none !important;
  margin: 0 !important;
}

/* 4. Card body padding */
.content-block.style-card .block-card-body,
.ph-link.style-card .block-card-body,
.admin-block-preview .style-card .block-card-body,
.phone .style-card .block-card-body,
.public-page .style-card .block-card-body,
.block-form-preview .style-card .block-card-body {
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* 5. Reset card title padding-right 20px and flex:1 from .ph-link b */
.content-block.style-card b,
.content-block.style-card .block-card-body b,
.ph-link.style-card b,
.admin-block-preview .style-card b,
.phone .style-card b,
.public-page .style-card b,
.block-form-preview .style-card b {
  padding: 0 !important;
  padding-right: 0 !important;
  flex: none !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  display: block !important;
}

/* 6. Thumbnail style: preserve exact 60px circle */
.content-block.style-thumbnail .ph-lthumb,
.content-block.style-thumbnail img.ph-lthumb,
.ph-link.style-thumbnail .ph-lthumb,
.ph-link.style-thumbnail img,
.public-page .content-block.style-thumbnail .ph-lthumb,
.phone .content-block.style-thumbnail .ph-lthumb {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  flex: 0 0 60px !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   AC1: Stickers Alignment, Bubble Tail & Text Overflow
   -------------------------------------------------------------------------- */

.block-stickers {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  max-width: 100% !important;
}

.block-sticker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  vertical-align: top !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 8px !important;
  max-width: 100% !important;
}

.sticker-pill {
  border-radius: 999px !important;
  padding: 0 9px !important;
  height: 20px !important;
  line-height: 20px !important;
}

.sticker-rounded {
  border-radius: 5px !important;
  padding: 0 8px !important;
  height: 20px !important;
  line-height: 20px !important;
}

/* Bubble tail: no layout shift, margin-bottom 0 matches ticket */
.sticker-bubble {
  position: relative !important;
  border-radius: 8px !important;
  padding: 0 8px !important;
  height: 20px !important;
  line-height: 20px !important;
  margin-bottom: 0 !important;
}

.sticker-bubble::after {
  content: '' !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 8px !important;
  width: 6px !important;
  height: 6px !important;
  background: inherit !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.sticker-ticket {
  position: relative !important;
  border-radius: 4px !important;
  padding: 0 10px !important;
  height: 20px !important;
  line-height: 20px !important;
  margin-bottom: 0 !important;
}

/* 320px responsive wrapping without overflow */
@media (max-width: 360px) {
  .block-sticker {
    white-space: normal !important;
    height: auto !important;
    min-height: 20px !important;
    line-height: 1.25 !important;
    padding: 2px 7px !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

.content-block,
.pub-linktext,
.block-card-body,
.block-desc,
.ph-link b,
.pub-linktext b {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   AC1: Block Gap 16px & Profile/Contact -> First Block >= 24px when search hidden
   -------------------------------------------------------------------------- */

.ph-links,
.phone .ph-links,
.public-page .ph-links,
.admin-block-preview .ph-links,
#public-links.ph-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* Profile-to-content spacing is applied once when search is absent. */
.phone:not(:has(.ph-search)) .ph-top,
.public-page:not(:has(.pub-search)) .pub-profile { margin-bottom:24px; }
.phone .pub-contact,.public-page .pub-contact { margin-top:16px; margin-bottom:0; }

/* --------------------------------------------------------------------------
   AC2: Admin Teal #146b68 Controls (Scoped strictly to Admin / .layout)
   -------------------------------------------------------------------------- */

.layout .addpill {
  background: #146b68 !important;
  color: #ffffff !important;
}
.layout .addpill:hover {
  background: #0f5351 !important;
}

.layout .roundadd {
  background: #146b68 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(20, 107, 104, 0.35) !important;
}
.layout .roundadd:hover {
  background: #0f5351 !important;
}

.layout .navi.on {
  color: #146b68 !important;
  background: rgba(20, 107, 104, 0.08) !important;
}

.layout .lico {
  background: #146b68 !important;
  color: #ffffff !important;
}

.layout .toggle input:checked + span {
  background: #146b68 !important;
}

.layout .toggle input:focus-visible + span {
  outline: 2px solid #146b68 !important;
  outline-offset: 2px !important;
}

.layout .form input:focus,
.layout .form textarea:focus,
.layout .form select:focus,
body:not(.public-mode) .dlg input:focus,
body:not(.public-mode) .dlg textarea:focus,
body:not(.public-mode) .dlg select:focus {
  outline: 2px solid #146b68 !important;
  outline-offset: 1px !important;
  border-color: #146b68 !important;
}

/* Min 44px tap targets and focus visible in Admin */
.layout button:focus-visible,
.layout a:focus-visible,
body:not(.public-mode) .dlg button:focus-visible {
  outline: 2px solid #146b68 !important;
  outline-offset: 2px !important;
}

.layout .ghost,
.layout .gray-btn,
.layout .addpill,
.layout .navi,
.layout .sb-acc,
body:not(.public-mode) .dlg button,
body:not(.public-mode) .dlg .form-act button {
  min-height: 44px !important;
}

.layout .ghost:hover {
  border-color: #146b68 !important;
  color: #146b68 !important;
}

/* --------------------------------------------------------------------------
   AC2: Restrained Liquid Glass on Admin Sidebar, Header & Modal Only
   (Solid fallback by default, enhanced via @supports backdrop-filter)
   -------------------------------------------------------------------------- */

/* Solid fallback for Admin chrome */
.layout .sb {
  background: #f4f6f6 !important;
  border-right: 1px solid #e1e7e7 !important;
}

.layout .mh {
  background: #ffffff !important;
  border-bottom: 1px solid #e1e7e7 !important;
}

body:not(.public-mode) .ov > .dlg {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16) !important;
}

/* Liquid glass enhancement when backdrop-filter is supported */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .layout .sb {
    background: linear-gradient(180deg, rgba(246, 248, 248, 0.82) 0%, rgba(238, 242, 242, 0.75) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 1px 0 0 rgba(20, 107, 104, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.4) !important;
  }

  .layout .mh {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(250, 252, 252, 0.76) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 1px 0 rgba(20, 107, 104, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.5) !important;
  }

  body:not(.public-mode) .ov > .dlg {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 250, 0.88) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 24px 48px rgba(15, 45, 44, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  }
}

/* Content cards remain neutral and opaque */
.layout .lcard,
.layout .inquiry-card,
.layout .stats-table,
.layout .block-calendar {
  background: #ffffff !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Strictly no glass or blur on public profiles or phone preview */
.public-page,
.public-mode,
.phone,
.phone *,
.public-page * {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   AC2: Accessibility - Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Main integration: sticker bodies wrap in every container, including desktop phone previews. */
.block-stickers .block-sticker {height:auto!important;min-height:20px!important;line-height:16px!important;padding:2px 8px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;text-align:center;}
.layout{background:radial-gradient(ellipse at 15% 0%,#eaf4f1 0,transparent 45%),#f8faf9;}
body:not(.public-mode) .dlg .addpill{background:#146b68;color:#fff;}
/* Keep the same phone-sized block width in all editor previews. */
.admin-block-preview .content-block{width:min(100%,312px)!important;max-width:312px!important;margin-inline:auto;}
.public-page .pub-profile .av.av-fallback{display:inline-flex;align-items:center;justify-content:center;line-height:1;}