:root{--bg:#fffaf1;--card:#fffdf9;--line:#eadfcf;--ink:#3d3027;--muted:#928273;--green:#6f9b78;--soft:#f3ede3}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
body{padding-bottom:78px}button,input{font:inherit}button{cursor:pointer}
#app{width:100%;max-width:1080px;margin:auto;padding:14px 12px 24px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.hero h1{font-size:22px;margin:0 0 3px;font-weight:900;letter-spacing:-.04em}.hero p{margin:0;color:var(--muted);font-size:12px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:800}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 14px;box-shadow:0 4px 14px #8c6b4020}
.search input{border:0;outline:0;width:100%;font-size:16px;background:transparent}.search span{font-size:22px}
.chips{display:flex;gap:7px;overflow:auto;padding:10px 0 8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font-weight:800;font-size:12px}.chip.active{background:#739c7d;color:#fff;border-color:#739c7d}
.resultbar{display:flex;justify-content:space-between;align-items:center;margin:3px 1px 9px;font-size:13px;color:var(--muted)}.resultbar b{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.card{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 2px 7px #71502714}
.pic{position:relative;aspect-ratio:1/1;background:#f3eee6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}.floweremoji{font-size:48px}.grade{position:absolute;top:7px;left:7px;border-radius:999px;background:#fff;padding:4px 8px;font-weight:900;font-size:11px}
.grade.UR{background:#ffdbe8}.grade.SSR{background:#ffe8a4}.grade.SR{background:#e8dbff}.grade.R{background:#ddecff}.grade.N{background:#ddf1d8}
.body{padding:10px 8px 11px;min-height:92px}.name{font-size:14px;line-height:1.3;font-weight:900;word-break:keep-all}.meta{margin-top:9px;color:#77917b;font-size:11px}
.bottom{position:fixed;z-index:20;bottom:0;left:0;right:0;height:72px;background:#fffdfaec;border-top:1px solid var(--line);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav{border:0;background:none;color:#887a6f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px}.nav b{font-size:21px}.nav.on{color:#668c70}
.shade{position:fixed;z-index:40;inset:0;background:#30291f80}.modal{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 22px));max-height:calc(100dvh - 28px);overflow:auto;background:#fff;border-radius:24px;padding:20px;box-shadow:0 20px 70px #0003}
.hidden{display:none!important}.modal h2{font-size:25px;margin:4px 0 8px}.modal p{color:var(--muted);margin:0 0 14px}.close{float:right;width:34px;height:34px;border:0;border-radius:50%;background:#f8f1e8;font-size:24px}
.field{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;margin:6px 0;outline:0;font-size:16px}.primary{width:100%;border:0;background:#739c7d;color:#fff;border-radius:14px;padding:13px;margin-top:7px;font-weight:900}.modal small{display:block;color:var(--muted);line-height:1.5;margin-top:12px}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:10px}.panel h2{margin-top:0}.member{display:flex;justify-content:space-between;border-bottom:1px solid #eee4d7;padding:12px 0}.member:last-child{border-bottom:0}
.checkrow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee4d7;padding:14px 0}.check{width:28px;height:28px}
@media (min-width:760px){#app{padding-left:24px;padding-right:24px}.grid{gap:14px}.name{font-size:16px}.body{min-height:100px;padding:13px}.hero h1{font-size:28px}}

.detailpic{height:220px;display:flex;align-items:center;justify-content:center;font-size:86px;background:var(--soft);border-radius:16px;overflow:hidden;margin:12px 0}.detailpic img{width:100%;height:100%;object-fit:contain}.wide{width:100%}.mygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.myflower{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;padding-bottom:9px}.myflower .thumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--soft);font-size:40px}.myflower img{width:100%;height:100%;object-fit:cover}.myflower b,.myflower span{display:block;padding:5px 8px;font-size:12px}.empty{grid-column:1/-1;text-align:center;padding:36px;color:var(--muted)}.secondary,.danger,.mini{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-weight:800}.secondary{width:100%;margin-bottom:8px}.danger{border-color:#e7b9b9;color:#a34b4b}.inline{display:flex;gap:7px;align-items:center}.inline .field{margin:0}.pinfield{max-width:110px}.fit{width:auto;min-width:80px;margin:0}.adminrow,.floweredit{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid #eee4d7;padding:10px 0}.rowbuttons{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.mini{padding:6px 8px;font-size:11px}.badge{font-size:10px;background:#e7f2e9;color:#56755d;border-radius:999px;padding:3px 6px}.uploadbox{display:block;border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;margin:8px 0;font-weight:800}.preview{max-height:220px;overflow:hidden;text-align:center}.preview img{max-width:100%;max-height:220px;border-radius:14px}.floweradminlist{max-height:440px;overflow:auto}.help{color:var(--muted);font-size:12px;line-height:1.5}hr{border:0;border-top:1px solid var(--line);margin:22px 0}
@media(max-width:520px){.mygrid{grid-template-columns:repeat(2,minmax(0,1fr))}.inline{flex-wrap:wrap}.inline .field{width:100%}.pinfield{max-width:none}.fit{width:100%}.adminrow{align-items:flex-start;flex-direction:column}.rowbuttons{justify-content:flex-start}}

/* ===== Mobile layout fix ===== */
@media (max-width: 600px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  #app{max-width:none;padding:12px 14px 24px}
  .hero{align-items:flex-start;gap:8px}
  .hero>div{min-width:0;flex:1}
  .hero h1{font-size:22px;line-height:1.2;white-space:nowrap}
  .hero p{font-size:12px;line-height:1.35}
  .pill{flex:0 0 auto;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 11px}

  .panel{width:100%;padding:15px 14px;border-radius:18px}
  .panel h2{font-size:23px;line-height:1.25;margin-bottom:14px}

  /* 길드원: 한 명당 가로 한 줄 카드 */
  .member{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:13px 2px;align-items:start}
  .member>b{display:flex;align-items:center;gap:6px;min-width:0;font-size:16px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
  .member>span{display:block;font-size:13px;line-height:1.4;color:var(--muted);white-space:normal;word-break:keep-all}
  .badge{display:inline-block;flex:0 0 auto;white-space:nowrap;font-size:10px;line-height:1.2;padding:4px 7px}

  /* 경쟁전 */
  .checkrow{gap:12px;padding:14px 2px}
  .checkrow>b{min-width:0;font-size:16px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
  .checkrow label{flex:0 0 auto;display:flex;align-items:center;gap:5px;white-space:nowrap}

  /* 관리 */
  .adminrow{width:100%;gap:8px;padding:12px 0}
  .adminrow>div:first-child{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;word-break:keep-all}
  .rowbuttons{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .rowbuttons .mini{width:100%;min-height:38px;white-space:normal}
  .floweredit{align-items:flex-start;flex-direction:column}

  /* 내 수첩 */
  .mygrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .myflower b{font-size:13px;line-height:1.35;word-break:keep-all}
  .myflower span{font-size:11px}

  .bottom{height:72px}
  .nav{min-width:0;padding:4px 1px;font-size:11px}
  .nav b{font-size:20px;line-height:1.15}
  .nav span{white-space:nowrap}
}

@media (max-width: 360px){
  #app{padding-left:10px;padding-right:10px}
  .hero h1{font-size:19px}
  .pill{font-size:12px;padding:7px 9px}
  .nav{font-size:10px}
}

/* ===== Full-width app subpages (competition / members / notebook / admin) ===== */
#grid > .panel,
#grid > .panel.wide{
  grid-column:1 / -1;
  width:100%;
  min-width:0;
}

@media (max-width:600px){
  /* 꽃도감 카드만 3열 유지하고, 내부 페이지 패널은 화면 전체 폭 사용 */
  #app{width:100%;max-width:none;margin:0;padding-left:14px;padding-right:14px}
  #grid{width:100%;min-width:0}
  #grid > .panel,
  #grid > .panel.wide{grid-column:1/-1;width:100%;max-width:none;margin:0}

  .checkrow{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    width:100%;
    padding:15px 4px;
  }
  .checkrow>b{
    min-width:0;
    font-size:16px;
    line-height:1.35;
    word-break:keep-all;
    overflow-wrap:normal;
  }
  .checkrow label{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:15px}
  .check{width:30px;height:30px;flex:0 0 auto}

  .member{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 12px;
    width:100%;
    align-items:center;
    padding:14px 4px;
  }
  .member>b{font-size:16px;line-height:1.35;word-break:keep-all;overflow-wrap:normal}
  .member>span{font-size:13px;line-height:1.4;text-align:right;white-space:normal}

  .panel{padding:16px 14px}
  .panel h2{font-size:24px;line-height:1.2}
}